jQuery custom queue does not work in IE9

Question

I use a custom queue to make some Stories:

  $('#section-1.u2').delay(200)
  .queue( function(next){
        $('.u2.b1').fadeOut(400);
        $('.u2.b2').fadeIn(400);
    next();
  });
  $('#section-1.u2').delay(400)
  .queue( function(next){
        $('.u2.b2').fadeOut(400);
        $('.u2.b3').fadeIn(400);
    next();
  });
....

then some more happens, but IE9 (Win7, IE9.0.8.) runs only the first part and stop then, without any error. What could i do here?

Thanks Dennis

Answer 1

Not sure what could happen, but you could try instead on jq 1.9+:

$('#section-1.u2').finish().delay(200)
  .queue( function(next){
        $('.u2.b1').fadeOut(400);
        $('.u2.b2').fadeIn(400);
        next();
  });
  $('#section-1.u2').delay(400)
  .queue( function(){
        $('.u2.b2').fadeOut(400);
        $('.u2.b3').fadeIn(400);
  });

Answer 2

May be you can use .dequeue() in each queue function:

Description: Execute the next function on the queue for the matched elements.

$('#section-1.u2').delay(200).queue( function(next){
    $('.u2.b1').fadeOut(400);
    $('.u2.b2').fadeIn(400);
    $(this).dequeue(); // here
    next();
});
$('#section-1.u2').delay(400).queue( function(next){
    $('.u2.b2').fadeOut(400);
    $('.u2.b3').fadeIn(400);
    $(this).dequeue(); // here and so on...
    next();
});