javascript - 1秒ごとに画像をズームするjQuery

Question

1秒ごとにズームして画像をアニメーション化しようとしましたが、ページをロードすると機能しますが、1秒ごとにアニメーションが必要です。画像の同じIDを使用すると問題になると思います。

これは私のJSFIDDLEです。

ありがとうございました。

Answer 1

あなたが使用しsetTimeoutているのは、特定の時間の後にいくつかのコードを実行するものです。必要なのはsetInterval、いくつかのコードを頻繁に実行する です。http://jsfiddle.net/UxTdU/3/

Answer 2

zoom間隔内からプロパティをインクリメントすることができます。

setInterval(function(){
    $("#myImg").animate({"zoom":"+=.025"}, 500);
}, 1000);

フィドル: http://jsfiddle.net/UxTdU/6/

特定のサイズまでズームしてから停止することもできます。

// Cache reference to image
var $image  = jQuery("#myImg");

// Cache reference to zooming interval
var zooming = setInterval(function(){

    // If current zoom is under 1.5
    $image.css("zoom") < 1.5 

        // Increment zoom by .025
        ? $image.animate({"zoom":"+=.025"}, 500) 

        // Otherwise, stop zooming
        : clearInterval(zooming);

// Run every 1 second
}, 1000);

フィドル: http://jsfiddle.net/UxTdU/8/

Answer 3

http://jsfiddle.net/UxTdU/5/ - setTimeout ではなく setInterval を使用します。setTimeout は 1 回だけ発生します。