jquery 动画然后停止答案

【问题标题】：jquery animate then stopjquery 动画然后停止
【发布时间】：2014-02-24 00:46:18
【问题描述】：

使用 jquery animate 有点挣扎。

目前，如果我继续单击按钮，显然它每次都会将对象向右移动 50px

$( ".button" ).click(function() {
  $( "#object" ).animate({opacity: 1,right: "+=50",}, 500, function() {}
);

有没有办法确保一次点击移动它，然后第二次点击不移动它？

即。将其向右移动的规则：50px 仅此而已，而不是 + 50px？

非常感谢任何帮助！

【问题讨论】：

你应该看看这个插件。它使用 CSS3 过渡来实现更流畅的动画，效果很好！ ricostacruz.com/jquery.transit

标签： javascript jquery jquery-animate

【解决方案1】：

使用.one()

$( ".button" ).one('click',function() {

Fiddle Demo

【讨论】：

抱歉 - 我没有很好地解释自己 - 是否有可能在点击时将其移动到特定的绝对正确位置？对不起，我说得不太对

【解决方案2】：

你可以使用one():

$(".button").one('click', function () {
    $("#object").animate({
        opacity: 1,
        right: "+=50",
    }, 500, function () {

    });
});

或者我建议您在此处禁用该按钮，让您的用户知道您的意图：

$(".button").click(function () {
    var $this = $(this);
    $("#object").animate({
        opacity: 1,
        right: "+=50",
    }, 500, function () {
        $this.prop("disabled",true);
    });
});

【讨论】：