Question

我有一个链接，点击后，对某些div等执行一些动画功能，效果很好。我的问题是当我多次点击按钮等时，动画看起来很奇怪。我希望如此，当点击我的按钮时，按钮被“禁用”，比如2秒。

我认为我不需要发布代码，只是询问您是否认为需要它。

我的链接是这样的：

<a href="button">Click</a>

Answer 1

是的，你绝对可以这样做。

添加点击处理程序并在动画运行时使用preventDefault()，直到完成为止。有关preventDefault的更多信息，请参阅jQuery文档。您可以在第一次单击后使用标志或更改单击处理程序来完成此操作。这是一个带旗帜的例子。

var isAnimating = false;
$("#animationLink").click(function(e) {
    if(!isAnimating) {
        isAnimating = true;
        setTimeout("isAnimating = false", 2000); // set to false in 2 seconds
        // alternatively you could wait until your animation is done
        // call animation code
    } else {
        e.preventDefault();
    }
});

来自点击处理程序的

return false;将与preventDefault具有相同的效果，并添加了阻止事件冒泡DOM的操作。

Answer 2

这是一种使用one完成此操作的自包含方式，它在单个触发器后自动取消绑定单击处理程序，并自动重新绑定单击函数：

$('#yourlink').one('click', function clicker(){ // name the function
    var that = this;
    event.preventDefault();
    do_your_stuff_here();
    var rebind = setTimeout(function() {
       $(that).one('click',clicker); // ...then rebind by name
    }, 2000);   
});

以下是一个有效的例子：http://jsfiddle.net/redler/8sGqK/

Answer 3

如果您在单击链接时不希望链接起作用，则需要返回false。

$('a').click(function(){
   if (doSomeCheck()) {
     //run animation
   } else {
      return false; //don't want the link to work
   }
});

但是，我建议您查看效果API和.stop()方法来修复您的动画：http://api.jquery.com/category/effects/

Answer 4

如果不使用全局变量或timeOuts，您可以利用动画的回调来重新分配函数。

function DoTheAnimation(){
    var $a = $(this);
    var h = $("div").height() + 100;
    $("div").animate({'height': h}, "slow",function(){
     $a.one("click.animate", DoTheAnimation);
   });
}

$("a").click(function(event){event.preventDefault();}).one("click.animate", DoTheAnimation);

jsfiddle上的代码示例。

单击时“暂时禁用”链接？

4 个答案: