代码

Question

我正在构建一个函数来根据点击的导航项交换内容面板。

代码

$('.p-nav-nav').on('click', function(e){
    var $this = $(this);
    var $which = $this.attr('data-rel');
    var $panel = $('.' + $which);
    $('.p-nav-nav').removeClass('active');
    $this.addClass('active');
    $('.panel-1, .panel-2, .panel-3').fadeOut('fast', 'easeInOutQuad', function(){
        setTimeout(function(){
            $panel.fadeIn('fast', 'easeInOutQuad');
        }, 100);
    });
});

我怎样才能让它自动运行，每隔几秒钟就说一次切换面板？我正在使用jQuery 1.7（因为这是我给予的工作，而且我不能升级它）

Answer 1

我首先将动画逻辑从事件和时序逻辑中分离出来。这使得事情变得更简单，因为你总是可以激活动画逻辑而不必依赖点击事件，所以像这样：

var animatePanel = function(panelName,nextPanel){
    // animation logic here
};

$('.p-nav-nav').on('click', function(e) {
   var $this = $(this);
   var $which = $this.attr('data-rel');
   var $panel = $('.' + $which);
   animatePanel($this,$panel);
};

var looper = window.setTimeout(function(){
    // logic to get the current panel, and set the next panel, called via animatePanel()
},1000);

通过这种方式，您可以点击激活动画，但也有一个自动动画的外部计时器。您可能希望在点击功能中放置一些重置looper超时的内容，或者暂停计时器的鼠标悬停，但这是您必须玩的所有内容并自己尝试，因为您不希望使用插件听起来你想要自己学习一些这些。不过，希望这能为你带来一些正确方向的想法！

jQuery面板自动面板交换

代码

1 个答案: