[Solved] jQuery Panel Auto Panel Swap

by


I’d start by separating out my animation logic from my event and timing logic. This keeps things a little simpler in that you can always activate the animation logic without having to depend on a click event, so something like this:

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);

In this way, you can have clicks activate an animation, but also have an outside timer that auto-animates. You might want to put something in your click function that resets the looper timeout, or a mouseover that pauses the timer, but that’s all stuff you’d have to play around with and try for yourself, since you don’t wish to use plugins and it sounds like you want to learn some of this for yourself. Hopefully this sparks some ideas in the right direction, for you, though!

solved jQuery Panel Auto Panel Swap