第一次單擊動畫時，第二次反向動畫時：如何？

Question

我已經閱讀了其他幾個類似的問題，但是它們基本上使用了不贊成使用的.toggle()函數。 我正在努力實現div#p的第一次單擊正確，然后再次單擊回到起始位置。

我寫了這段代碼：

$(function(){
    $("#p").on("click", function(){
        if ($("#p").data("right") == 'n') {
            $("#p").animate({marginLeft:"50"}, 500);
            $("#p").data("right", 'y');
        } else {
            $("#p").animate({marginLeft:"0"}, 500);
            $("#p").data("right", 'n');
        }
    })
})

這有一個大錯誤 ： 在加載頁面后，第一次單擊不會觸發任何動作 。（第二次單擊和其他單擊會正確切換動畫動作）。

這里有什么收獲，如何糾正？

Answer 1

$(function(){
    $("#p").on("click", function(){
        var state = parseInt( $(this).css('margin-left'), 10 ) > 0;
        $(this).animate({marginLeft : state ? 0 : 50}, 500);
    });
});

或包含數據，並考慮未定義的數據值：

$(function(){
    $("#p").on("click", function(){
        var state = $(this).data("right");
        $(this).animate({marginLeft: (state ? 50 : 0)}, 500);
        $(this).data("right", !state);
    });
});

Answer 2

您正在嘗試data-right地獲取data-right但我認為您尚未設置該數據。 您應該在加載頁面時進行設置，以便可以實際檢索它。 使用.ready()或僅向<p>添加data-right

Answer 3

我用這個線程的想法編寫了類似的代碼。 這是1 div，但可以像在此線程中使用的那樣重寫為標簽“ p”。

$( ".content" ).click(function() {
    if( $( this ).hasClass( "vysun" ) ){
      var status = true;
      $( this ).removeClass( "vysun" );
    }
    else{
      var status = false;
      $( this ).addClass( "vysun" );
    }
    $( this ).animate({width : status ? "33%" : "100px"}, 1500, "linear");
});