1

Can anyone see why this code doesn't display the animation? I can see in Chrome that the animation is happening correctly (in the F12 tools I see the animation happening, and the divs are switching in and out). So the code is working, but I am not seeing the main image animate - it is just disappearing when the remove() is called, and the next image is shown immediately when that happens.

I have checked IE10 and Chrome and they both do the same thing. I also tried using animate('opacity') with the same result.

I can't see it but I am guessing it is something simple I am just missing because I have been looking at it too long!

Thanks for your help.

The script:

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);
    });
}

The CSS:

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

And the 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>
4

1 回答 1

2

这仅仅是因为 z-index。你看，你动画推子的第一个孩子在其他孩子之后。

只需添加这些 css，它应该在以下之后工作：

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

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

于 2013-05-01T23:56:14.897 回答