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，因为它很慢并且同时执行多个动画有问题。将整个事物包装在自定义库中。从前端拨打一个电话。

jQuery交叉淡入淡出图像无限

2 个答案: