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

发布于 2024-10-25 02:42:13 字数 223 浏览 1 评论 0原文

我有一个链接，当单击该链接时，会对某些 div 等执行一些动画功能，并且效果非常好。我的问题是当我多次单击按钮等时，动画看起来很奇怪。我希望这样，当单击我的按钮时，该按钮会“禁用”例如 2 秒钟。

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

我的链接是这样的：

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

原文

I have a link that when clicked, performs some animation functions to some divs etc and works very well. My problem is when I click the button more than once etc, the animation looks weird. I would like it so, that when my button is clicked, the button is "disabled" for say 2 seconds.

I don't think I need to post the code, but just ask if you think you need it.

My link is like so:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

﹎☆浅夏丿初晴 2024-11-01 02:42:13

是的，你绝对可以做到这一点。

您添加一个点击处理程序，并在动画运行时使用 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 中冒泡的操作。

Yes, you can absolutely do this.

You add a click handler and use preventDefault() when the animation is running until it is complete. More about preventDefault is in the jQuery docs. You can use a flag or change your click handler after the first click to accomplish this. Here's an example with a flag.

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; from your click handler will have the same effect as preventDefault with the added action of preventing event bubbling up the DOM.

回复收藏 0 原文

撕心裂肺的伤痛 2024-11-01 02:42:13

这是一种使用 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/

Here's a self-contained way to do it using one, which automatically unbinds the click handler after a single trigger, and a click function that rebinds itself:

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

Here's a working example: http://jsfiddle.net/redler/8sGqK/

回复收藏 0 原文

左耳近心 2024-11-01 02:42:13

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

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

不过，我建议您查看效果 API 和 .stop() 方法来修复动画变得不稳定的问题：

If you don't want the link to work when you click it, you need to return false.

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

However, I recommend you look at the effects API and the .stop() method to fix your animation getting wonky : http://api.jquery.com/category/effects/

回复收藏 0 原文

北城半夏 2024-11-01 02:42:13

在不使用全局变量或超时的情况下，您可以利用动画的回调来重新分配函数。

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 上的代码示例。

Without using global variables or timeOuts you could leverage the callback for your animation to reassign the function.

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);

Code example on jsfiddle.

回复收藏 0 原文

~没有更多了~