1

フェードアウトアニメーションに進む前に、ローテーターが画像を4秒間保持するようにします。.delayをさまざまな場所に入力しようとしましたが、どこに行くのかわかりません。jqueryについて少しだけ知ってください。

/* image rotator */
function changeImg(){
$('.photogallery').animate({opacity: 0}, 3000, function(){
$(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') ',);

}).animate({opacity: 1}, 3000);
}

});
4

1 に答える 1

1

現在使用しているメソッドを使用する場合は、へ.delay()の最初の呼び出しの前に配置します.animate()。ただし、これは、このメソッドを連続して複数回呼び出していることを前提としています。

$('.photogallery').delay(4000).animate({
    opacity: 0
}, 3000, function () {
    $(this).css('background', 'url(' + preloadArr[currImg++%preloadArr.length].src +')';
}).animate({
    opacity: 1
}, 3000);

デモ

メソッドが次の反復を自己トリガーするようにしたい場合changeImgは、アニメーションの実行の最後に再帰的に呼び出すことができます。これにより画像が回転しますが、無限ループに再帰を利用すると、ブラウザで問題が発生することがよくあります。

$('.photogallery').delay(4000).animate({
    opacity: 0
}, 3000, function () {
    $(this).css('background', 'url(' + preloadArr[currImg++%preloadArr.length].src +')';
    colorIndex++;
}).animate({
    opacity: 1
}, 3000, changeImg);

デモ

推奨される方法はwindow.setInterval、ブラウザがメソッドを呼び出すまでの時間を設定するために使用することです。メソッド内で発生するアニメーションの遅延は考慮されないため、タイミングを調整する必要があります。これを簡単に回避するために、withをスケジュールする前に一度だけ呼び出しましたsetInterval。

changeImg();
window.setInterval(changeImg, 4000);

デモ

于 2013-02-27T06:46:13.773 に答える