Question

我有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;
}

}）;

在动画完成时我该怎么做才能禁用其他链接

谢谢

Answer 1

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

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

您当然可以替换$（'a'）选择器以仅匹配部分链接。

Answer 2

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

Answer 3

你的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;
                                       } });
});

（使用^= starts with selector一次在所有锚点上放置一个点击处理程序，然后在函数内部使用下划线后面的id部分作为动画的类名。）

编辑：为了适应您现有的代码，您已经从$("a").click()处理程序返回false，但是虽然这会取消默认行为并阻止事件通过DOM冒泡，但它不会阻止其他事件处理程序在运行的a个元素上。为此，请使用stopImmediatePropagation()：

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

如何在动画时禁用链接

3 个答案: