Jquery在多个div上淡入淡出

Posted 2023-05-08

【中文标题】Jquery在多个div上淡入淡出

【英文标题】：Jquery FadeIn and Out on Multiple Divs

【发布时间】：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。已编辑。

【参考方案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"   />
</div>
<!-- End of Synopsis -->
<div id="book" class="fader">
    <img src="http://www.unearthingfilm.com/images/bookGlow.png"   />
</div>

并为它制作动画：

var synopsis = $('.fader');

【讨论】：

太好了！如果我希望它们以随机模式而不是同时淡入淡出，我是否必须重新编写代码？

是的。按照蔡斯的建议去做。

好的。谢谢，我会试一试，让你们知道