1

このコードでアニメーションが表示されない理由は誰にも分かりますか? アニメーションが正しく発生していることを 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>
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 に答える