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

我用这个帖子的想法写了类似的代码。这是1 div，但它可以重写为标记＆＃34; p＆＃34;正如你在这个帖子中使用的那样。

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

在第一次点击动画，在第二个反向动画：如何？

3 个答案: