CODEWITHSUNDEEP
javascriptjqueryhtml
Morgan Kenyon
Morgan Kenyon

Reputation: 3172

jQuery Animations Control Sequence

I'm am attempting to build a homepage that has animations. I am having hard time controlling my animations though. All I need is to hide elements, and then show elements after a certain time. Loop through that sequence, and pause and show all elements when the someone hovers over the box. Example simple animation.

I have a long way to go. At first I tried using the .css() visibility property, now I'm using .show() and .hide().

I need a way to loop through my animations. I attempt to add another

setTimeout(clear1(), 3000);

to the end of my box1 function, but that wouldn't work for some reason.

I need a way to on a user hover over #box1, that all animations stop. I have tried using .clearQueue, but I couldn't get that to work.

Upvotes: 1

Views: 345

Answers (4)

m.spyratos
m.spyratos

Reputation: 4219

First of all, set to your css:

.box {display: none;}

SHOW ALL BOXES ON HOVER See Demo

This will show all boxes on hover and then continue the animation from where it stopped (will hide the boxes that hadn't shown up during the animation). I think that is what you are after.

var index = 0; // To keep track of the last div showed during animation
var time_of_delay = 1000; // Set the time of delay

// Start the animation
$(document).ready(function () {
    box1(time_of_delay);
});

// The hover states
$("#box1_1").hover(
    function() {
        box1(0);
    }, function() {
        box1(time_of_delay);
    });

// The animation function
function box1 (delay_time) { 
    var time=delay_time;
    if(time>0) {
        $(".box").slice(index).each(function() {
            $(this).hide().delay(time).show(0);
            time=time+time_of_delay;
        });   
        index=0;
    } else {
        $(".box:visible").each(function() {
            index++;
        });
        $(".box").stop(true).show(0);
    }
}

PAUSE ON HOVER See Demo

This will only pause the animation and continue from where it stopped.

var time_of_delay = 1000; // Set the time of delay

// Start the animation
$(document).ready(function () {
  box1(time_of_delay);
});

// The hover states
$("#box1_1").hover(
  function() {
    box1(0);
  }, function() {
    box1(time_of_delay);
});

// The animation function
function box1 (delay_time) { 
    var time=delay_time;
    if(time>0) {
        $(".box:hidden").each(function() {
          $(this).delay(time).show(0);
          time=time+time_of_delay;
        });
    } else {
        $(".box").stop(true);
    }
}

Upvotes: 2

louisbros
louisbros

Reputation: 875

Here's one way to do it:

// hide all of the boxes
$('.box').hide();

// reference to each box, the current box in this list and a flag to stop the animation
var divs = box1.getElementsByClassName('box');
var i = 0;
var run = true;

// this will animate each box one after the other
function fade(){
    if(i < divs.length && run){
        $(divs[i++]).fadeIn(500, function(){
            setTimeout(fade, 1000);
        });
    }
};
fade();

// stop the above function from running when the mouse enters `box1`
$('#box1').on('mouseenter', function(){console.log('enter');
    run = false;
});

// start the function again from where we stopped it when the mouse leaves `box1`
$('#box1').on('mouseleave', function(){console.log('leave');
    run = true;
    fade();
});

Demo: http://jsfiddle.net/louisbros/dKcn5/

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206058

LIVE DEMO

  var $box = $('#box1').find('.box'),
      boxN = $box.length,
      c = 0,
      intv;

  $box.eq(c).show(); // Show initially the '0' indexed .box (first one)

  function loop(){
    intv = setInterval(function(){
       $box.eq(++c%boxN).fadeTo(400,1).siblings().fadeTo(400,0);
    },1000);
  }
  loop(); // Start your loop

  $('#box1').on('mouseenter mouseleave', function( e ){
    return e.type=='mouseenter' ? (clearInterval(intv))($box.fadeTo(400,1)) : loop();
  });

Where ++c%boxN will take care to loop your animation using the Modulo % (reminder) operator inside a setInterval.
Than all you need to do is to register a mouseenter and mouseleave on the parent element to:

  • clear the Interval on mouseenter + fade all your elements
  • restart your loop function on mouseleave.

Upvotes: 0

asifrc
asifrc

Reputation: 5841

I used setTimeout and clearTimeout and periodically call a function that increments (and resets) the box to display. Since I assign setTimout to boxt, I am able to call clearTimeout(boxt) on box1's hover event so that I can stop specifically that loop. Here's my jsfiddle. It might not be the exact effect you're trying to achieve, but it should be the right functionality and be easily adaptable with a few tweaks. Let me know if this works for you and if you have any questions about how it works :)

Upvotes: 1

Related Questions