首先点击动画，第二个反向动画：如何？

我已经读过其他几个这样的问题，但他们基本上使用已弃用的.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'); 
     } 
    }) 
})

这是一个很大的错误工作：页面加载后，第一次点击火灾没有（第二等的点击正确的切换动画动作）。

这里有什么问题，如何解决这个问题？

来源

2013-07-16 Miloš Đakonović

使用的jsfiddle –

这依赖于P的默认状态，您可以创建一个演示if-else语句，我有第一个自动发射的第二个动画。我试过了。 – 2013-07-16 10:07:04

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

来源

2013-07-16 10:06:46 adeneo

您的第一个解决方案是正确的，其次我得到与我自己一样的结果。无论如何非常感谢，我一直在努力挣扎几个小时...... –

您正在尝试获取data-right，但我认为您已经设置了该设置。您应该在加载页面时进行设置，以便实际检索它。要么使用.ready()或者只是添加data-right您<p>

来源

2013-07-16 10:06:33 Robbietjuh

如果我宣布的数据权之前的任何地方提供的HTML，想必你也没有设置**数据右面的**正确 –

你是双击吗？这是一个if-else声明，它不能同时启动...... – Robbietjuh

不，但现在我怀疑浏览器可能有问题，即使我知道这是非常罕见的情况... –

我写了类似的代码从这个线程的想法。这是为1格，但它可以重写标记为“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"); 
});

来源

2014-03-31 06:30:28

首先点击动画，第二个反向动画：如何？

回答

相关问题