jquery - jQuery 交叉淡入淡出图像无限

Question

此代码无限交替 2 个图像，它的工作原理：

<img src="../images/opisSlike/nagrada2a.jpg" class = "nag2altImg" alt=""/>
<img src="../images/opisSlike/nagrada2b.jpg" class = "nag2altImg2" alt=""/>
//second image starts with opacity 0

<script type="text/javascript">

function myAnimate(){

    $('img.nag2altImg').delay(2500).animate({"opacity": "0"}, 1500);
    $('img.nag2altImg').delay(2500).animate({"opacity": "1"}, 1500);        

    $('img.nag2altImg2').delay(2500).animate({"opacity": "1"}, 1500);
    $('img.nag2altImg2').delay(2500).animate({"opacity": "0"}, 1500);       

    // this animation lasts for 8 seconds: 2500 delay + 1500 animation + 2500 delay + 1500 animation
}

$(document).ready(myAnimate());
$(document).ready(setInterval(function() {myAnimate()}, 8000));

</script>

但我想知道，有没有更优雅的方式，可以这么说，制作这样的东西？

Answer 1

    function myAnimate(){ 

        $('img.nag2altImg').delay(2500).animate({"opacity": "0"}, 1500); 
        $('img.nag2altImg').delay(2500).animate({"opacity": "1"}, 1500);         

        $('img.nag2altImg2').delay(2500).animate({"opacity": "1"}, 1500); 
        $('img.nag2altImg2').delay(2500).animate({"opacity": "0"}, 1500);        

        // this animation lasts for 8 seconds: 2500 delay + 1500 animation + 2500 delay + 1500 animation 
        // run forever.
        myAnimate();
    } 

$(document).ready(myAnimate());

这将是一个更好的解决方案：

function myAnimate() {
    $('img.nag2altImg2').animate({
        opacity: 1.0
    }, {
        duration: 1500
    }).animate({
        opacity: 0
    }, {
        duration: 1500
    }).animate({
        opacity: 1.0
    }, {
        duration: 1500,
        complete: myAnimate
    })
}
$(document).ready(myAnimate());

Answer 2

使用一个计时器。使其全球化。让您的所有动画都基于一个计时器。手动编码动画并将 jQuery 抛在脑后，因为它很慢并且在同时执行多个动画时存在问题。将整个内容包装在自定义库中。从您的前端拨打一个电话。