我今天刚刚开始学习JavaScript和jQuery,并且第一个问题让我真正头疼。我一直在寻找解决这个问题的时间,但没有一个解决方案能够奏效。
我的问题是:我创建了一个“旋转木马”网站,如果点击菜单链接,内容会向左或向右滑动。
一切正常,但是如果你在点击功能的动画完成之前再次点击另一个menulink,则内容会滑落并且不在正确的位置。
我尝试过promise()。done(),flags,callback等等,但没有任何对我有用:(也许我做错了..
我正在寻找一个解决方案,阻止这个点击功能,直到它完成,或者更好地建立这个功能的队列,然后一个接一个地运行,但不能同时运行。
这是我的JS代码,我知道它并不完美,可以更好地解决,但就像我说的,我刚刚开始学习这些东西,我还不熟悉语法等等。
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);
});
});
你能帮帮我吗?
答案 0 :(得分:0)
未经测试,但您正在寻找 -
$('#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);
});
请参阅此处有关测试animation
的jQuery选择的信息答案 1 :(得分:0)
BradGreens的答案看起来最正确。
这是一个有趣的替代方案:
您可以使用“currentAnimating”布尔值来判断动画是否仍在执行。 然后在动画完成时,将其设置为false;
var animating = false
if(pos == 'home' && !animating) {
animating = true;
$('li#galery').animate({"opacity" : 0}, 100, function() {
// Animation complete.
animating = false;
}););
}
答案 2 :(得分:0)
你可能会考虑稍微不同的东西 - 即允许点击这三个元素中的任何一个来“劫持”之前不完整点击动作的进度。
$(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()
大大减少了,其工作原理如下: