Jquery在多个div上淡入淡出答案

【问题标题】：Jquery FadeIn and Out on Multiple DivsJquery在多个div上淡入淡出
【发布时间】：2013-04-09 07:34:02
【问题描述】：

我正在使用脚本来淡入和淡出 div。它在一个上运行良好，但在另一个上根本不行。有谁知道为什么？这是它的小提琴http://jsfiddle.net/MeEc6/

这是 JavaScript：

$(document).ready(function()                         

    {  var book = $('#book');
       var synopsis = $('#synopsis');
function runIt() {
   synopsis.animate({opacity:'+=1'}, 1000);
   synopsis.animate({opacity:'-=0.9'}, 2000, runIt).delay(2000);
}
       runIt();});

【问题讨论】：

两个动画都在synopsis 对象上执行。你想在book 对象上执行一个吗？
是的。实现它的正确方法是什么？
Java =/= JavaScript。已编辑。

标签： jquery jquery-animate fadein fadeout

【解决方案1】：

据我所知，您希望在 book 和 synopsis 上制作相同的动画，但您只在 synopsis 上包含 animate 方法：

EXAMPLE

function runIt() {
   synopsis.animate({opacity:'+=1'}, 1000);
   synopsis.animate({opacity:'-=0.9'}, 2000, runIt).delay(2000);

   book.animate({opacity:'+=1'}, 1000);
   book.animate({opacity:'-=0.9'}, 2000, runIt).delay(2000);
}

【讨论】：

【解决方案2】：

为两者添加一个类：http://jsfiddle.net/MeEc6/3/

<div id="synopsis" class="fader">
    <img src="http://www.unearthingfilm.com/images/interface/shine.png" width="150" height="150" />
</div>
<!-- End of Synopsis -->
<div id="book" class="fader">
    <img src="http://www.unearthingfilm.com/images/bookGlow.png" width="365" height="347" />
</div>

并为它制作动画：

var synopsis = $('.fader');

【讨论】：

太好了！如果我希望它们以随机模式而不是同时淡入淡出，我是否必须重新编写代码？
是的。按照蔡斯的建议去做。
好的。谢谢，我会试一试，让你们知道