Question

我有这段代码：

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<script>
$(function()
{
    function animation()
    {
        $('#img0').attr('src',$('#img1').attr('src')).fadeOut(4000).attr('src',$('#img2').attr('src')).fadeIn(4000).fadeOut(4000).attr('src',$('#img3').attr('src')).fadeIn(4000).fadeOut(4000) ;
        animation();
    }
});
</script>

<body>
<img  id="img0" width="613" height="260" alt="OffLease Only Lot" />
<img src="static/images/home/slides/SLIDERS-mP.jpg" id="img1" width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/slider_usa.jpg" id="img2"  width="613" height="260" alt="OffLease Only Lot" hidden="true" />
<img src="static/images/home/slides/SLIDERS-ODOMETER.jpg"  id="img3"  width="613" height="260" alt="OffLease Only Lot" hidden="true" />

</body>
</html>

我希望幻灯片通过更改图像来源显示图像，然后通过显示和消失来继续显示图像但我的代码不起作用

为什么？
我该如何解决？

Answer 1

你必须等待动画像这样完成...

element$.fadeOut(4000, function () {

  // Do something when faded out

  element$.fadeIn(4000, function () {

    // Do something when faded in

  });
});

Answer 2

如果您要尝试循环显示三张图像，请执行以下操作：

function animate1() {
    $('#img1').fadeIn(4000, function() {
        $('#img1').fadeOut(4000, animate2);
    })
}

function animate2() {
    // Do the same thing here, and do animate3 too
}

$(function() { $('#img0').fadeOut(4000, animate1) };

我还需要花一点时间来浏览jQuery fadeOut和fadeIn页面。我认为它们不像你认为的那样工作。

http://api.jquery.com/fadeOut/

http://api.jquery.com/fadeIn/

fadein和fadeout jquery

2 个答案: