在第一次单击动画时，在第二次反向动画时:如何

On first click animate, on second reverse animation: how to?

本文关键字：动画 如何 第一次 单击 第二次      更新时间：2023-09-26

我读过其他几个类似的问题，但它们基本上使用了不推荐使用的.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');
        }
    })
})

它正在工作，有一个大错误：页面加载后，第一次单击不触发任何东西。（第二次和其他单击将正确切换动画动作）。

这里有什么问题，如何纠正？

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

您正在尝试获取data-right，但我认为您还没有设置。您应该在加载页面时设置它，以便实际检索它。使用.ready()或将data-right添加到<p>

我用这个线程中的想法编写了类似的代码。这是针对1div的，但可以像您在该线程中使用的那样重写为标记"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");
});
相关文章：