3

我今天刚开始学习 JavaScript 和 jQuery，遇到了第一个问题，这让我非常头疼。我一直在寻找几个小时来解决这个问题，但没有一个解决方案奏效。

我的问题是：我制作了一个“轮播”网站，如果单击菜单链接，内容会向左或向右滑动。

一切正常，但是如果您在单击功能的动画完成之前再次单击另一个菜单链接，则内容会滑开并且不在正确的位置。

我已经尝试过 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);
    });

});

你能帮我么？

4

3 回答 3

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()大大减少了，工作方式如下：

  • 杀死当前正在运行的任何动画
  • 将当前元素返回到其静止状态
  • 将请求的元素设置为活动状态。
于 2013-03-27T02:33:36.697 回答
0

BradGreens 的答案看起来最正确。

这是一个有趣的选择：

您可以使用“currentAnimating”布尔值来判断动画是否仍在执行。然后在动画完成时，将其设置为 false；

var animating = false

if(pos == 'home' && !animating) {
    animating = true;
    $('li#galery').animate({"opacity" : 0}, 100,  function() {
        // Animation complete.
        animating = false;
    }););
}
于 2013-03-27T01:22:42.287 回答
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);
});

请参阅此处以测试动画的 jQuery 选择

于 2013-03-27T01:20:33.097 回答