0

そのため、ユーザーがクリックすると別の画像に変わる 3 つの画像が配置されています。fadeOutしかし、jQueryを追加しfadeInて、切り替えプロセスのトランジション効果を与えたかったのです。これは私が思いついたものですが、うまくいきません。

$(".chosen").click(function() {     
    var src = $(this).attr("src");      
    if (src == "blank.png") (function() {
        $(this).fadeOut(400);
        {
            $(this).attr("src", "ex.png").fadeIn(400);      
        }
    });

    else if (src == "ex.png") (function() {
        $(this).fadeOut(400);
        {
            $(this).attr("src", "oh.png").fadeIn(400);          
        }
    });

    else (function() {
        {
            $(this).fadeOut(400);
            $(this).attr("src", "blank.png").fadeIn(400);       
        }
    });
});
4

1 に答える 1

1

fadeOut画像のソースを変更し、アニメーションの完了後に元に戻す必要があります。

フェードアウトのドキュメントにはcomplete、アニメーションのレンダリングが完了したときのコールバックのパラメータが示されています。

$(this).fadeOut(400, function(){/*code to be executed when animation finishes*/});

あなたの例では、次のことができます。

$(this).fadeOut(400, function(){
    $(this).attr("src", "ex.png").fadeIn(400); 
});

次のように、コードをリファクタリングして冗長なコードを減らすことができます。

$(".chosen").click(function() {     
    var $this = $(this); // avoid calling $ multiple times

    $this.fadeOut(400, function() {
        var src = $this.attr("src");    
        var newSrc = "";

        // this if/else block could be refactored further
        if (src == "blank.png") {
            newSrc = "ex.png";
        }
        else if (src == "ex.png") {
            newSrc = "oh.png";
        }
        else { // if src == "oh.png"
            newSrc = "blank.png";
        }

        $this.attr("src", newSrc).fadeIn(400);
    });
});
于 2013-03-09T03:24:22.913 に答える