javascript - 在第一次单击动画时，在第二次反向动画中：如何？

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，但我认为您尚未设置。您应该在加载页面时设置它，以便您可以实际检索它。使用.ready()或只是添加data-right到您的<p>

Answer 3

I wrote similar code with ideas from this thread. This is for 1 div but it can be rewrite to tag "p" as you used in this thread.

$( ".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");
});