Javascript 图像相互重叠的动画

我正在尝试实现一个小的图像动画，以半透明的方式将图像添加到彼此的顶部，这样所有图像都可以一次看到

此外，按钮还应起到打开和关闭的作用，以便实现不同的图像或颜色组合

目前，我只能使用每个按钮一次，也只能看到两个图像

（）

函数crossfadeImages（）{
var$active=$（“#show img.active”）；
var$next=$（“#show img.next”）；
$active.animate({
不透明度：“0.5”
}，500，函数（）{
$（this.stop（'style'）；
});
}
$（'.buttons a.page'）.first（）.addClass（'activeButton'）；
$（'.buttons a.page'）。单击（函数（）{
$（'.buttons a.page'）。removeClass（'activeButton'）；
$（this.addClass（'activeButton'）；
if（！$（'#show img'）.find（'img'）.eq（$（this.attr（'rel'））.hasClass（'active'））{//如果单击的图像还不是活动图像
$（'#show img'）.find（'img'）.eq（$（this.attr（'rel'））.addClass（'next'）；//将图像标记为下一个图像
crossfadeImages（）；
}
返回false；
})

img{
宽度：65%；
不透明度：1；
}
/*图像显示*/
#显示img{
位置：相对位置；
}
#显示img img{
位置：绝对位置；
z指数：1；
背景色：#fff；
}
#显示img img.active{
z指数：3
}
#显示img img.next{
z指数：2
}
img{
显示：块；
}
.按钮{
宽度：200px；
}

可能性














主割台

我稍微调整了你的代码，制作了这把小提琴。希望这就是你想要的

    <div class="row">

   <div class="large-5 columns buttons">
      <br> <br> <br> <br>
      <h4>the possebilities</h4> <br> <br> <br> <br>
      <a class="page activeButton radius blue button" href="#" rel="0">button1</a><br>
      <a class="page radius green button" href="#" rel="1">button2</a><br>
      <a class="page radius red button" href="#" rel="2">button3</a><br>
      <a class="page radius black button" href="#" rel="3">button4</a>
  </div>

   <div id="show-img" class="large-7 columns show-img">
      <h1>main header</h1>
      <img src="http://vollwebdesign.com/foundation-testing/blue.png">
      <img src="http://vollwebdesign.com/foundation-testing/rosa.png">
      <img src="http://vollwebdesign.com/foundation-testing/yellow.png">
      <img src="http://vollwebdesign.com/foundation-testing/orange.png">       

  </div>
</div>

Js代码

$('.buttons a.page').click(function() {
  if($("#show-img img:eq(0)").css("opacity") == 1){
    $("#show-img img:eq(0)").css("opacity","0.7");
  }
  var index = $(this).attr("rel");
  var correspondingImage = $("#show-img img:eq(" + index + ")");
  if ($(this).hasClass("active")) {
    $(this).removeClass("active");
    correspondingImage.removeClass("active");
  } else {
    $(this).addClass("active")
    correspondingImage.addClass("active");
  }
  return false;
})

---

问题是什么？太棒了，就是这样！万分感谢沙申克：-）

$('.buttons a.page').click(function() {
  if($("#show-img img:eq(0)").css("opacity") == 1){
    $("#show-img img:eq(0)").css("opacity","0.7");
  }
  var index = $(this).attr("rel");
  var correspondingImage = $("#show-img img:eq(" + index + ")");
  if ($(this).hasClass("active")) {
    $(this).removeClass("active");
    correspondingImage.removeClass("active");
  } else {
    $(this).addClass("active")
    correspondingImage.addClass("active");
  }
  return false;
})