jQuery - 防止相同的点击功能一次运行多次
我刚开始学习JavaScript和jQuery,并得到了我的第一个问题,这让我很头痛。我一直在寻找几个小时来解决这个问题,但没有任何解决方案能够奏效。jQuery - 防止相同的点击功能一次运行多次
我的问题是:我做了一个“旋转木马”网站,其中内容向左或向右滑动,如果点击菜单链接。
一切工作正常,但如果你点击功能的动画完成之前再次点击另一个menulink,内容滑动,并没有在正确的位置。
我tryed承诺()()完成,标志,回调等,但没有为我工作:(也许我之所以这样做是错的..
我在寻找一个解决方案,阻止这个点击功能,直到它完成,或者更好地使这个功能的队列,在另一个,但不是在同一时间运行。 ,但就像我说的,我今天刚开始学习这些东西,而且我还不熟悉语法等等。
var gotoPage = function(pos) {
if(pos == 'home') {
$('li#home').css({"opacity" : 1});
$('li#home').css({"left" : "1700px"});
$('li#home').animate({"left" : "0px"}, speed, 'easeInOutQuint');
$('li#news').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
$('li#news').animate({"opacity" : 0}, 0);
$('li#galery').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
$('li#galery').animate({"opacity" : 0}, 0);
} else if (pos == 'news') {
$('li#news').css({"opacity" : 1});
$('li#news').css({"left" : "1700px"});
$('li#news').animate({"left" : "0px"}, speed, 'easeInOutQuint');
$('li#home').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
$('li#home').animate({"opacity" : 0}, 0);
$('li#galery').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
$('li#galery').animate({"opacity" : 0}, 0);
} else if (pos == 'galery') {
$('li#galery').css({"opacity" : 1});
$('li#galery').css({"left" : "1700px"});
$('li#galery').animate({"left" : "0px"}, speed, 'easeInOutQuint');
$('li#news').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
$('li#news').animate({"opacity" : 0}, 0);
$('li#home').animate({"left" : "-1700px"}, speed, 'easeInOutQuint');
$('li#home').animate({"opacity" : 0}, 0);
}
}
$(document).ready(function(){
hideAll();
autoSelect();
$('#home').click(function(){
gotoPage(posHome);
});
$('#news').click(function(){
gotoPage(posNews);
});
$('#galery').click(function(){
gotoPage(posGalery);
});
});
你能帮我吗?
没有测试,但你要找的这个 -
$('#home').click(function(){
if($(this).is(':animated')) return;
gotoPage(posHome);
});
$('#news').click(function(){
if($(this).is(':animated')) return;
gotoPage(posNews);
});
$('#galery').click(function(){
if($(this).is(':animated')) return;
gotoPage(posGalery);
});
在这里看到有关测试的jQuery选择为animation
我还应该提及'.is()'文档 - http://api.jquery.com/is/ – BradGreens 2013-03-27 01:25:36
BradGreens答案看起来最正确的。
这里是一个有趣的替代:
你可以有一个“currentlyAnimating”布尔说,如果动画仍在进行。 然后在动画完成时,将其设置为false;
var animating = false
if(pos == 'home' && !animating) {
animating = true;
$('li#galery').animate({"opacity" : 0}, 100, function() {
// Animation complete.
animating = false;
}););
}
与我的第一个相同的解决方案,不适用于我,因为我没有将该函数放入动画,但在if语句结束时^ ^这个作品。非常感谢你 – eScoo 2013-03-27 01:33:30
你可能会考虑一些稍微不同的 - 即允许在任何三个元素的点击“劫持”以前不完整的点击操作的进度。
$(document).ready(function() {
var $currentePage = null;
var gotoPage = function(pos) {
if($currentePage) {
$currentePage.stop().animate({'left' : '-1700px'}, speed, 'easeInOutQuint').css('opacity', 0);
}
$currentePage = $('li#' + pos).css({
'opacity' : 1,
'left' : '1700px'
}).animate({'left' : '0px'}, speed, 'easeInOutQuint');
}
hideAll();
autoSelect();
$('#home, #news, #galery').click(function() {
gotoPage(this.id);
});
$('#home').trigger('click');
});
正如你所看到的,gotoPage()
大大减少工作原理如下:
- 杀死当前正在运行
- 返回当前元素到其静止状态
- 动画的任何动画请求元素处于活动状态。
不完全是我想要的,但我从中学到了很多东西,非常感谢你:) – eScoo 2013-03-27 12:14:03
没有答案,但你应该知道的关于jQuery的第一件事是链接。 '$(...)'函数很慢;使用'$('li#home')。css({“opacity”:1})。css({“left”:“1700px”});'。或者更好的是,'$('li#home')。css({“opacity”:1,“left”:“1700px”});'。后者对“有生命的”呼叫尤其如此。 – Dave 2013-03-27 01:20:46