我有以下函数:
$('.link1').click(function(){
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
});
它切换div并向下滚动页面。问题是,每当用户再次切换页面向下滚动时。。。我怎么能只在第一次点击时运行这个动画函数?
使用标志或设置数据属性以确保滚动动画仅在第一次单击时发生。
var flag=true;
$('.link1').click(function(){
$("#div2").slideUp(function(){$("#div1").slideToggle();});
if (flag) {
$('html, body').animate({scrollTop: '600px'}, 800);
flag = false;
}
});
我猜#div2
仍然应该切换,但它不应该每次点击都滚动?
jQuery.one()http://api.jquery.com/one/
$('.link1').one( 'click', function(){
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
});
使用.one
函数绑定只触发一次的事件。
$('.link1').one('click', function(){
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
});
以下内容适用于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. */
也许你可以在制作动画时使用它作为参考。;)
您可以在处理程序的末尾解除对点击处理程序的绑定,这样它就不会再触发:
$('.link1').off('click');
使用标志
var noRun = 0
$('.link1').click(function(){
if(noRun==1) {
return
}
noRun = 1
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
});
您可以保存一个简单的"令牌"来检查点击是否是第一次以这种方式触发:
$('.link1').click(function(){
if(!$(this).data('isFirstTime')) {
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
$(this).data('isFirstTime', true);
}
});
这应该可以防止进一步点击
这应该是
(function(){
var first=true;
$('.link1').click(function(){
if (first){
first=false;
$("#div2").slideUp(function(){$("#div1").slideToggle();});
$('html, body').animate({scrollTop: '600px'}, 800);
}
});
})();