jQuery css background position change twice

Question

I'm basically trying to alter the background-position on a div twice in fairly quick succesion . Heres my current code:

$('.slide1').css({'margin':' 0 0 0 1000px','display':'none'}).delay(2400).show().animate({marginLeft: 0},1000, function(){ 
        $('.accordion').css('background','#000'); 
        $('.shadow-horizontal').css('visibility','visible');
        $('.panel:nth-child(2)').delay(2000).css('background-position','0px top'); //this one doesn't seem to fire
        $('.panel:nth-child(2)').delay(2000).css('background-position','-410px top'); //this one does 
    });

Whats happening is only the second change is taking place. The first one doesn't seem to be affected at all.

I'll note that I need to do it using jQuery and ideally I'd prefer to wrap the jquery .css changes in a function and just call that were the current jQuery .css changes are.

I also tried a long string version too that didn't work.

$('.panel:nth-child(1)').css('background-position','0px top').delay(500).css('background-position','-41px top');

Here's a live version of where I'm at: http://faithandsony.co.uk/sony_accordion_hover-hightlight/

Thanks in advance for any answers. I'm around to answer any questions.

Answer 1

This could just be a timing issue. You could use a simple timeout() to perform the first before the second, making the second CSS change wait 1000ms (or 1 second) before executing.

$('.panel:nth-child(2)').delay(2000).css('background-position','0px top');

setTimeout(function() {
    $('.panel:nth-child(2)').css('background-position','-410px top');
}, 4000);

---

Alternatively, keep the delay for the first at 2000, and change the second to 4000, giving:

$('.panel:nth-child(2)').delay(2000).css('background-position','0px top'); 
$('.panel:nth-child(2)').delay(4000).css('background-position','-410px top');

Answer 2

delay only work with animate,

to keep it's use, just do an empty animate

$('.panel:nth-child(2)').delay(2000).animate({},function()
{ $(this).css('background-position','0 top');
}).delay(2000).animate({},function()
{ $(this).css('background-position','-410px top');
});

and if it's not work with empty {}, try animate a dumb parameter if you always get by exemple margin:0, animate him :

animate({margin:0},time,callback);