Question

我一直在研究这个类似菜单的菜单，我几乎有一个有序列表和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"});
  });
});

我已经花了好几个小时看帖子看到解决方案，没有运气，请帮忙。

Answer 1

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

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

而不是

$("first-img")

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

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

CSS：

img{
  opacity: 0;
}

#first_img{
  opacity: 1;
}

JS

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

FIDDLE

Answer 2

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

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

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

.toggledImg {
  opacity: 0
}

Answer 3

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

之前你应该添加css：

#gallery img{ opacity:0}

Answer 4

您需要稍微调整一下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);
    }
  });
});

使用JQuery切换不透明度

4 个答案: