how to automatically animate jquery gallery

Question

I am trying to build a jquery accordion gallery, I managed to build the gallery with all the relevant hover effect,

now I want it to play automatically when the user is not hovering on any section, but I have no idea how to start ( I only know how to make elements respond to mouse actions in Jquery)

You can see the gallery in Jsfiddle - http://jsfiddle.net/eyalbin/zcT9E/

code - html

<div class="container">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
    <div class="fourth"></div>
    <div class="fifth"></div>
</div>

code - css

.container { width: 800px; height: 400px; background: white; border: 1px black solid; margin: 0 auto; position: relative; overflow:hidden; }
.first { width: 400px; height: 400px; background: red; position: absolute; }
.second { width: 400px; height: 400px; background: blue; position: absolute; left: 100px;  }
.third { width: 400px; height: 400px; background: green; position: absolute; left: 200px; }
.fourth { width: 400px; height: 400px; background: purple; position: absolute; left: 300px; }
.fifth { width: 400px; height: 400px; background: yellow; position: absolute; left: 400px; }

code - jquery:

<script>
$(".fifth").hover(function(){
    $('.first').animate({"left":"0px"}, 200);
    $('.second').animate({"left":"100px"}, 200);
    $('.third').animate({"left":"200px"}, 200);
    $('.fourth').animate({"left":"300px"}, 200);
    $('.fifth').animate({"left":"400px"}, 200);
});


$(".fourth").hover(function(){
    $('.first').animate({"left":"0px"}, 200);
    $('.second').animate({"left":"100px"}, 200);
    $('.third').animate({"left":"200px"}, 200);
    $('.fourth').animate({"left":"300px"}, 200);
    $('.fifth').animate({"left":"700px"}, 200);
});


$(".third").hover(function(){
    $('.first').animate({"left":"0px"}, 200);
    $('.second').animate({"left":"100px"}, 200);
    $('.third').animate({"left":"200px"}, 200);
    $('.fourth').animate({"left":"600px"}, 200);
    $('.fifth').animate({"left":"700px"}, 200);
});

$(".second").hover(function(){
    $('.first').animate({"left":"0px"}, 200);
    $('.second').animate({"left":"100px"}, 200);
    $('.third').animate({"left":"500px"}, 200);
    $('.fourth').animate({"left":"600px"}, 200);
    $('.fifth').animate({"left":"700px"}, 200);
});

$(".first").hover(function(){
    $('.first').animate({"left":"0px"}, 200);
    $('.second').animate({"left":"400px"}, 200);
    $('.third').animate({"left":"500px"}, 200);
    $('.fourth').animate({"left":"600px"}, 200);
    $('.fifth').animate({"left":"700px"}, 200);
});
</script>

Thanks in advance, Eyal

Answer 1

Live demo

$(function() { // DOM ready

  var $sl = $(".slide"),
      x = 100,  // each position at += X
      d = 300,  // anim distance
      s = 500,  // animation speed
      p = 2500, // pause between animations
      c = 0,    // set Current slide number
      n = $sl.length, sI;

  $sl.hover(function(e) {
    anim($(this).index());
    return e.type.match('t') ? clearInterval(sI) : loop();
  }); 

  function anim(cc,ss) {
    $sl.each(function(i,e){
      $(e).stop().animate({left: i>(c=cc%n)? d+i*x : i*x },ss||s);
    });
  } 

  function loop() {
    sI = setInterval(function(){ anim(++c); },p);
  }

  anim(c,1); 
  loop();

});

_{Simplified HTML:}

<div class="container">
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
</div>

_{Simplified CSS: (yes, even CSS can be fun, jQuery will set the needed positions!)}

.container{
  position: relative;
  overflow:hidden;
  margin: 0 auto;
  width: 800px;
  height: 400px;
  border: 1px solid black;
}
.slide{
  left: 0;
  width: 400px;
  height: 400px;
  position: absolute;
}
.slide:nth-child(1){ background:red; }
.slide:nth-child(2){ background:blue; }
.slide:nth-child(3){ background:green; }
.slide:nth-child(4){ background:purple; }
.slide:nth-child(5){ background:yellow; }

Answer 2

I implemented a simple example which used setInterval to auto-expand accordion.

And declare a isInterrupted flag to indicate whether auto-expand should be stop or not.

Try to update your JS like this:

JS

function expand(index){
  $('.first').animate({"left":"0px"}, 200);
  $('.second').animate({"left":(index<1?400:100)+"px"}, 200);
  $('.third').animate({"left":(index<2?500:200)+"px"}, 200);
  $('.fourth').animate({"left":(index<3?600:300)+"px"}, 200);
  $('.fifth').animate({"left":(index<4?700:400)+"px"}, 200);
}

var isIterrupted=false;
var playInterval = 1000;
$(function(){
  var $frames=$(".frame");
  var index=0;//the pointer of current expand frame
  var runner = setInterval(function(){
    if(isIterrupted){
        clearInterval(runner);
    }
    expand(index);
    index++;
    index%=$frames.length;  //circular auto-expand
  },playInterval);

  $frames.hover(function(){
    isIterrupted=true;  //stop auto-expand
    $frames.stop();
    expand($(this).index());
  });
});

JSFiddle DEMO

This example is based on your "accordion" implementation.

I think this is not the only way to do this.

Hope this is helpful for you.