只执行一次jquery动画

Question

我有以下函数：

$('.link1').click(function(){
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    $('html, body').animate({scrollTop: '600px'}, 800);
});

这段代码可以切换指定的元素并滚动页面到该元素位置。问题是，每次用户切换时页面都会再次滚动...如何使该动画函数仅在第一次点击时运行？

- fackz

Answer 1

使用标记或设置数据属性，以确保滚动动画仅在第一次点击时发生。

var flag=true;

$('.link1').click(function(){
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    if (flag) {
        $('html, body').animate({scrollTop: '600px'}, 800);
        flag = false;
    }
});

我猜测#div2应该仍然可以切换，但每次点击时不应滚动？

- adeneo

---

@Archer - 你是什么意思？ - j08691

如果OP正确地编写了问题，那么重点不是仅仅运行一次click函数，而是在每次单击时切换div，但只在第一次单击时执行滚动操作，这使得大多数答案都是错误的！ - adeneo

@adeneo，只将其中一个语句放入“one”中，这是否真的是一个思维飞跃？SO上的答案不应该是复制粘贴的修复方法，而仅仅是指导。 - jbabey

但是.one()不起作用！如果点击函数只执行一次，那么就不会有切换效果，所以无论是否复制/粘贴，都是错误的答案和错误的方法，至少在阅读问题时是这样，问题中指出OP不希望每次元素切换时都有动画滚动效果，并且大多数答案都没有切换？此外，点击处理程序附加到一个类上，而one再次只会执行一次，所以如果有几个具有相同类的元素，就会出现相同的问题？ - adeneo

那也可以，但现在你必须为相同的事件和相同的元素编写事件处理程序，尽管这并不重要。你接受的答案是错误的，但又有谁在乎呢？ - adeneo

Answer 2

jQuery .one() http://api.jquery.com/one/

$('.link1').one( 'click', function(){
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    $('html, body').animate({scrollTop: '600px'}, 800);
});

- Matthew Blancarte

---

这是一个比我的更好的答案。老实说，我从来没有需要一个处理程序只执行一次，但有趣的是jQuery包括了这个方法。 - Zach Shipley

我猜重点是避免在后续点击时滚动，并且不仅运行整个点击函数一次？ - adeneo

@adeneo 知道他想让 slidetoggle 多次使用，使用标志确实是有意义的。 :) - Matthew Blancarte

Answer 3

使用.one函数绑定一个只触发一次的事件。

$('.link1').one('click', function(){
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    $('html, body').animate({scrollTop: '600px'}, 800);
});

- Roman

---

这里或者 unbind('click') 将是最佳选择。 - jbabey

Answer 4

以下内容适用于JQuery。

所使用的CSS：

.cpos {
    position: relative;
    top: -1.65em;
    left: 1.8em;
}

所使用的JQuery:

var p=null; /* Initialize variable p. */
p=$("b").detach(); /* Detach every possible <b>b</b>-tags. */
var p=$("<b>Console loaded!</b>").addClass("cpos"); /* Do anything, like adding class. */
p.appendTo("#container"); /* Append new data to the anchor container. */

也许你可以在制作动画时参考这个。;)

- KimKat

Answer 5

使用标志。

var noRun = 0
$('.link1').click(function(){
    if(noRun==1) {
      return
     }
     noRun = 1  
    $("#div2").slideUp(function(){$("#div1").slideToggle();});
    $('html, body').animate({scrollTop: '600px'}, 800);
});

- Diodeus - James MacFarlane

---

这与被接受的答案相同，为什么要点踩？ - Diodeus - James MacFarlane

Answer 6

您可以保存一个简单的“令牌”来检查是否是第一次以这种方式触发点击：

$('.link1').click(function(){ 
    if(!$(this).data('isFirstTime')) {
        $("#div2").slideUp(function(){$("#div1").slideToggle();}); 
        $('html, body').animate({scrollTop: '600px'}, 800); 
        $(this).data('isFirstTime', true);
    }
}); 

这应该可以防止进一步的点击

- Roberto Conte Rosito

Answer 7

应该可以了

(function(){
    var first=true;
    $('.link1').click(function(){
        if (first){
            first=false;
            $("#div2").slideUp(function(){$("#div1").slideToggle();});
            $('html, body').animate({scrollTop: '600px'}, 800);
        }
    });
})();

- Luka

Answer 8

您可以在处理程序的末尾解除绑定该点击处理程序，以便它不会再次触发：

$('.link1').off('click');

- Zach Shipley

---

请注意，off 仅适用于由 on 绑定的处理程序，而这在 OP 的代码片段中并不是这种情况。 - jbabey