0

このスライドショーを作成していますが、画像がアニメーション化されると、次の画像が白く点滅します。説明するのが少し難しいので、私はこれを作成しましたhttp://jsfiddle.net/2SJ8B/ それは私のcssと関係があると思いますか？

#slideshow {
    width: 700px;
    height: 400px;
    padding: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid;
}

#slideshow img {
    position: absolute;
    height: 500px;
    width: 700px;
}​

スムーズなアニメーションではありませんが、何かが起こっていることに気付くでしょう。ありがとう！

4

2 に答える 2

0

あなたの問題は、フェードの途中で、両方の写真の透明度が50％であるため、白い背景の25％が表示されることだと思います。これは「フラッシュ」として認識される可能性があります。発信画像をフェードアウトせず、代わりにフェードインが完了した後に非表示にすることを検討してください（を使用setTimeout()）。

于 2012-11-22T19:16:17.230 に答える
0

この更新されたフィドルを試してください...

http://jsfiddle.net/2SJ8B/5/

fadeIn()重要なのは、フェードが完了した後に実行されるコマンドの機能です...

$('#slideshow img:first').appendTo('#slideshow').fadeIn(1000, function() {
    $(this).siblings().hide();
});

これは、最初の画像を取得し、最後の画像の後に（その前に）配置してからフェードインすることを意味します。それが完了すると、他のすべての画像が非表示になります。1秒後、それが繰り返されます。デュアルフェージングがなくなったので、白い「フラッシュ」はなくなりました。

于 2012-11-22T19:26:23.567 に答える