Question

任何人都可以看到为什么这段代码不显示动画？我可以在Chrome中看到动画正确发生（在F12工具中，我看到动画正在发生，而div正在切换和切换）。所以代码工作正常，但我没有看到主图像有效 - 它只是在调用remove（）时消失，并且当发生这种情况时会立即显示下一个图像。

我已经检查了IE10和Chrome，他们都做了同样的事情。我也尝试使用具有相同结果的animate（'opacity'）。

我无法看到它，但我猜这是一件简单的事情，我只是因为我已经看了太长时间而失踪了！

感谢您的帮助。

剧本：

function fader(){
    $('#fader div:first').fadeOut(600,function() {
        $('#fader').append('<div class="faderitem">'+$('#fader div:first').html()+'</div>');
        $('#fader div:first').remove();
        setTimeout('fader()',6000);
    });
}

CSS：

#fader {
    width:620px;
    height:620px;
    position:relative;
}
#fader div.faderitem {
    width:620px;
    height:620px;
    position:absolute;
    top:0;
    left:0;
}

HTML：

<div id="fader">
    <div class="faderitem"><img src="/images/scroller/26-a.jpg" alt="" width="620" height="620" /></div>
    <div class="faderitem"><img src="/images/scroller/26-b.jpg" alt="" width="620" height="620" /></div>
    <div class="faderitem"><img src="/images/scroller/26-c.jpg" alt="" width="620" height="620" /></div> 
</div>

Answer 1

这仅仅是因为z-index。你看，你为推子的第一个孩子制作动画，而其他孩子则落后于其他孩子。

只需添加那些css，它应该在以下之后起作用：

#fader.faderitem:nth-child(1){
    z-index : 2
}
#fader.faderitem:nth-child(2){
    z-index : 1
}

编辑：正如Owen Masback所提到的，设置超时的好方法就是：setTimeout(fader,6000);

Jquery fadeOut没有动画

1 个答案: