0

アニメートしようとしているセレクターがあり、同時に背景画像をフェードアウトし、別の背景画像をフェードインします。これは私がこれまでに持っているものです。スクリプトは正常に動作しますが、最初にアニメーション化してからフェードします。アニメーションとフェードを同時に行う方法を知っていますか?

$(document).ready(function(){
    $(".selector").click(function () {
        $(this).animate({left: "75px"}, function () {
            $(this).fadeOut("fast", function () {
                $(this).addClass("selector-hover").fadeIn("fast");
            });
        });

        return false;
    });
});

これが理にかなっていることを願っています。ご協力ありがとうございました。

4

3 に答える 3

1

ええ、コールバックにフェードを入れないでください...

$(document).ready(function(){
    $(".selector").click(function () {
        $(this).animate({left: "75px"}).fadeOut("fast", function () {
            $(this).addClass("selector-hover").fadeIn("fast");
        });
        return false;
    });
});
于 2012-10-01T19:01:27.397 に答える
0

これは、アニメーション コールバック内に FadeIn を入れることの効果です。アニメーションの終了後にコールバックが起動されるため、フェードインが開始するまでにアニメーションはすでに完了しています。

フェードアウトとフェードインをアニメーション コールバックの外に移動してみてください。問題なく動作するはずです。

于 2012-10-01T19:03:53.597 に答える
0

jquery animateページのこの例を使用してください

$( "#go1" ).click(function(){
  $( "#block1" ).animate( { width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500 )
     .animate({ borderRightWidth: "15px" }, 1500 );
});

http://api.jquery.com/animate/ キュー false でうまくいくはずです。ページを見て、動作を確認してください。少し下にスクロールする必要があります

于 2012-10-01T19:16:08.733 に答える