如何在制作动画时禁用链接

how can I disable links while animate

本文关键字：链接 动画      更新时间：2023-09-26

我有3个链接，每个链接都做一些动画

    $("a#home_hits").click(function () {    
    $(".hits").animate({left: "549px", opacity: 1}, { duration: 1500, queue: false });  
});
    $("a#home_hits1").click(function () {   
        $(".hits1").animate({left: "549px", opacity: 1}, { duration: 1500, queue: false });
    });
    $("a#home_hits2").click(function () {
        $(".hits2").animate({left: "549px", opacity: 1}, { duration: 1500, queue: false });
    });

但问题是，如果我点击任何链接，其他链接仍在工作

我尝试了这个代码没有运气

$('a').click(function () {
if ($('div:animated')) {
    return false;
}

})；

当动画完成时，我能做些什么来禁用其他链接

感谢

当动画运行时，您可以轻松禁用链接

$('a').click(function () {
    if ($(':animated').length) {
    return false;
 }    
});

当然，您可以将$（'a'）选择器替换为只匹配某些链接。

$('div:animated')不返回null，而是返回一个包含0个元素的jquery对象。在这种情况下，可以使用$('div:animated').length > 0。

您的if语句：

if ($('div:animated')) {

并没有按你想的那样做，因为$('div:animated')总是返回一个对象，即使没有元素与选择器匹配，而且就if而言，任何对象都是真实的。您需要测试.length属性以查看是否有任何元素匹配：

if ($('div:animated').length > 0) {

注意：考虑到锚元素中的id和要设置动画的元素中的类名之间的关系，您可以用一个函数设置所有三个动画。

编辑：您可以使用此设置当前是否有动画运行的标志：

var animationInProgress = false;
$('a[id^="home_hits"]').click(function () {
    if (animationInProgress)
        return false;
    animationInProgress = true;
    $(this.id.split("_")[1]).animate({left: "549px", opacity: 1},
                                     { duration: 1500, queue: false,
                                       complete : function() {
                                            animationInProgress = false;
                                       } });
});

（使用^=的方法从选择器开始，一次在所有锚点上放置一个点击处理程序，然后在函数内部使用下划线后面的id部分作为类名来设置动画。）

编辑：为了适应现有代码，您已经从$("a").click()处理程序返回了false，但尽管这将取消默认行为并防止事件在DOM中冒泡，但不会阻止a元素上的其他事件处理程序运行。要做到这一点，请使用stopImmediatePropagation():

$('a').click(function (e) {
   if ($(':animated').length > 0) {
      e.stopImmediatePropagation();
      return false;
   }
});
相关文章：