使用 JQuery 切换不透明度答案

【问题标题】：Toggleing opacity with JQuery使用 JQuery 切换不透明度
【发布时间】：2015-02-20 04:29:43
【问题描述】：

我一直在制作这个类似画廊的菜单，我几乎有一个有序列表和 15 张图片。图片都是opacity: 0，除了第一个。当我点击第一张图片时，其余的应该会淡入opacity: 1。

这是我的html：

<ol id="gallery">
  <li><img id="first_img" src="http://www.astro-galaxy.com/screens/ss1_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss2_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss3_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss4_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss5_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss6_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss7_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss8_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss9_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss10_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss11_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss12_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss13_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss14_tmb.jpg"></li>
  <li><img src="http://www.astro-galaxy.com/screens/ss15_tmb.jpg"></li>
</ol>

这里是我的 JQuery：

$(document).ready(function() {
  $("first-img").click(function() {
    $("#gallery img").animate({"opacity": "toggle"});
  });
});

我一直在看帖子寻找解决方案，但没有运气，请帮忙。

【问题讨论】：

如果您告诉我们您当前看到的行为，而不仅仅是您想要的，您更有可能获得帮助。
更正你的 jquery 选择器而不是 first-img 它应该是 #first-img
当我完成所有的修正并单击图像时，图像消失了，而不是其他的都消失了。但是我得到了我一直在寻找的东西@JRulle 找到了解决方案，我还在徘徊，我可以让它们按顺序出现吗，比如第一个，然后是第二个，依此类推，直到最后一个出现，同样再次点击时效果倒退？

标签： jquery html toggle opacity

【解决方案1】：

您需要稍微调整一下 JavaScript 以处理 if 语句中的切换。此外，您的第一张图片选择器应该是 #first_image 以匹配 HTML 中的 id。 JSfiddle demo

$(document).ready(function() {
  $("#first_img").click(function() {
    if($("#gallery img").not("#first_img").css("opacity") == 0) {
      $("#gallery img").not("#first_img").animate({opacity: "1"},1000);
    } else {
      $("#gallery img").not("#first_img").animate({opacity: "0"},1000);
    }
  });
});

【讨论】：

我不确定您为什么要这样做。这里根本不需要if 语句
好的，这是一个复杂的代码和一切，但你的代码完美运行，我只有一个问题，有没有办法让它们按顺序出现？还是我要为每个 li 元素添加一个单独的 id？谢谢！
你的意思是按顺序出现吗？（即一个接一个）
是的，我不知道我是否可以在不为每个元素添加 id 的情况下做到这一点，我不想这样做。

【解决方案2】：

如果你有一个降低不透明度的类可能会更容易。这样你就可以像这样使用 toggleClass 方法：

$("first-img").click(function() {
  $("#gallery img).toggleClass("toggledImg");
}

然后将自定义类添加到您的 CSS：

.toggledImg {
  opacity: 0
}

【讨论】：

【解决方案3】：

$(document).ready(function() {
  $("first-img").click(function() {
$("#gallery img").animate({opacity:"1"});
});
});

在添加 css 之前：

#gallery img{ opacity:0}

【讨论】：

【解决方案4】：

你的标识符错误，应该是：

$("#first_img").click(function() {

而不是

$("first-img")

这不能识别 id 或我们 _ 并且您可以将 opacity 设置为 1 而不是 toggle，除非您希望它们淡入淡出

您可以使用简单的 CSS 来设置页面加载时的不透明度，而不是尝试使用 JS 选择器来执行此操作：

CSS：

img{
  opacity: 0;
}

#first_img{
  opacity: 1;
}

$("#first_img").click(function() {
  $("#gallery img").animate({"opacity": "1"});
});

FIDDLE

【讨论】：

@user284098 你一定是加错了，也许你没有把它包装在$(document).ready 函数中，正如你从我的小提琴中看到的那样，它工作得很好。
是的，他们确实更改为 opacity: 1，但它没有切换，这正是我试图搜索的内容。