javascript 只执行一次 jquery 动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11691055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Execute jquery animate only one time
提问by fackz
I've the following function:
我有以下功能：
$('.link1').click(function(){
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
});
It toggles a div and scroll the page down. The problem is that everytime the user toggles the page scroll down again...how could I run this animate function only at first click?
它切换一个 div 并向下滚动页面。问题是每次用户切换页面时都会再次向下滚动......我怎么能只在第一次点击时运行这个动画功能？
回答by adeneo
Use a flag or set a data attribute to make sure the scrolling animation only occurs on the first click.
使用标志或设置数据属性以确保滚动动画仅在第一次单击时发生。
var flag=true;
$('.link1').click(function(){
$("#div2").slideUp(function(){$("#div1").slideToggle();});
if (flag) {
$('html, body').animate({scrollTop: '600px'}, 800);
flag = false;
}
});
I'm guessing #div2should still toggle, but that it just should'nt scroll on every click?
我猜#div2仍然应该切换，但它不应该在每次点击时滚动？
回答by Matthew Blancarte
jQuery .one() http://api.jquery.com/one/
jQuery .one() http://api.jquery.com/one/
$('.link1').one( 'click', function(){
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
});
回答by Roman
use the .onefunction to bind an event that fires only once.
使用该.one函数绑定一个只触发一次的事件。
$('.link1').one('click', function(){
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
});
回答by KimKat
The following works with JQuery.
以下适用于 JQuery。
The CSS used:
使用的 CSS：
.cpos {
position: relative;
top: -1.65em;
left: 1.8em;
}
The JQuery used:
使用的 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. */
Maybe you could use this for reference when animating. ;)
也许您可以在制作动画时使用它作为参考。;)
回答by Roberto Conte Rosito
You can save a simple "token" to check if is the first time that click is fired in this way:
您可以保存一个简单的“令牌”来检查是否是第一次以这种方式触发点击：
$('.link1').click(function(){
if(!$(this).data('isFirstTime')) {
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
$(this).data('isFirstTime', true);
}
});
This should prevent further click
这应该可以防止进一步点击
回答by Luka
This should do it
这应该做
(function(){
var first=true;
$('.link1').click(function(){
if (first){
first=false;
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
}
});
})();
回答by Zach Shipley
You could unbind that click handler at the end of the handler so that it never triggers again:
您可以在处理程序的末尾取消绑定该单击处理程序，以便它永远不会再次触发：
$('.link1').off('click');
回答by Diodeus - James MacFarlane
Use a flag
使用标志
var noRun = 0
$('.link1').click(function(){
if(noRun==1) {
return
}
noRun = 1
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
});
