2

I am trying to set an interval in an each loop using jQuery. I thought the following may work, but no such luck:

menuSlide = $(this).animate({
  left: '250px'
}, 50, function() {
});

var slideIn = function() {

  $('._jsNav').each(function(){
    setTimeout(function(menuSlide) {
    }, 200);
 });
}

$('._jsStage').mouseenter(slideIn);

Anyone who could let me know what's wrong with it? Or if I am approaching it incorrectly?

Thanks!

Jezen Thomas
  • 13,004
  • 5
  • 49
  • 87
Matt Starkey
  • 71
  • 1
  • 4
  • 1
    In short, Javascript do not support sleep function, and only setTimeout is support. And in you case the main loop will run to fast for you, base on the setTimeout do not block the main loops run. See http://stackoverflow.com/questions/951021/what-do-i-do-if-i-want-a-javascript-version-of-sleep – FIG-GHD742 Oct 07 '12 at 14:13
  • What are you trying to accomplish? Should each `._jsNav` element be animated 200ms after the mouse enters the element? – pimvdb Oct 07 '12 at 14:49

2 Answers2

0

Look at this link JavaScript Timing Events and this example:

setTimeout(function(){alert("Hello")},3000); // anonymous function

And answer the question (your code):

setTimeout(function(menuSlide) { }, 200); // anonymous function with parameter
// menuSlide is undefined here

How this code must work?

Added:

As I understand you trying to create something like this http://jsfiddle.net/hcFGv/ ?

webdeveloper
  • 16,626
  • 3
  • 46
  • 47
  • Hey thanks for the help, that example is sort of what I'd like to create, but the red bars would shrink in order, the top one first, then the second and then the third, with a very short delay between them to create a nice effect. – Matt Starkey Oct 07 '12 at 15:57
  • @MattStarkey Sorry, I need to go, look at this example: http://jsfiddle.net/hcFGv/1/ – webdeveloper Oct 07 '12 at 16:28
0

You need the help of that little plugin jquery-timing. It does what you want with very short code:

$('._jsStage').mouseenter(function(){
    $('._jsNav').each($).wait(200).animate({left:250},50,$);
});

That's all!

If you want the same thing in a single jQuery line, the plugin allows to write even shorter:

$('._jsStage').on('mouseenter').$('._jsNav').each($).wait(200).animate({left:250},50,$);
peter
  • 185
  • 5