3

jQueryを使って画像をスワイプするエフェクトを作りたいです。画像をクリックすると、1) 枠の幅をゼロにし、2) 別の画像に変更し、3) 枠の幅を 100% に戻します。私は次のコードを使用しましたが、何をしても、フレームが 100% に戻る前に画像が最初に変更されます (1-> 3-> 2)。コールバック関数を使用してみましたが、わかりませんでした。アドバイスをお願いします。

$("#frame img").click(function(){
    $("#frame").animate({width:"0%", height:"100%"}, "slow"); //1
    $("#frame img").attr({src:"images2.png"}); //2
    $("#frame").animate({width:"100%", height:"100%"}, "slow"); //3
});

以下は、コールバック関数で試したものです（完全に間違っていると思います）：

$("#frame img").click(function(){
    $("#frame").animate(({width:"0%", height:"100%"}, "slow"), function(){
         $("#frame img").attr(({src:"images2.png"}), function(){
              $("#frame").animate({width:"100%", height:"100%"}, "slow");
              });
         )};
});
4

3 に答える 3

2

コールバックを使用する（可能な場合、たとえば、.attr()コールバックをサポートしていません）：

$("#frame img").click(function(){
    $("#frame").animate({width:"0%", height:"100%"}, "slow", function(){
        // a callback executed, when the first animation completes
        $("#frame img").attr({src:"images2.png"});
        $("#frame").animate({width:"100%", height:"100%"}, "slow");
    });
});

ただし、コードは最適化できます。アプローチの1つは次のようになります。

var frame = $("#frame"); // cache frame
var images = frame.find("img"); // cache images within frame
images.click(function(){
    frame.animate({width:"0%", height:"100%"}, "slow", function(){
        // a callback executed, when the first animation completes
        images.attr({src:"images2.png"});
        frame.animate({width:"100%", height:"100%"}, "slow");
    });
});

（もちろん、結果が時間の経過とともに変化しない$("#frame")場合を除きます）$("#frame img")

于 2012-06-08T23:46:43.520 に答える
1

あなたが探していることを実行するjQueryプラグインがいくつかあります...私がそれを見つけたら、私はこの答えにコメントします。今のところ、これがあなたがそれをすることができる方法です。

$("#frame img").click(function(){
    $("#frame").animate({width:0}, "slow", function(){
        $("#frame img").attr({src:"images2.png"}).ready(function(){
            $("#frame").animate({width:$("#frame img").width()}, "slow");
        });
    });
});

.readyは、蘇生する前に画像がロードされていることを確認します。

于 2012-06-08T23:48:00.390 に答える
0

次の例を試して、問題がないかどうか教えてください。

$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

完全なリファレンス：http ：//api.jquery.com/animate/および完全な関数について読む

于 2012-06-08T23:49:28.203 に答える