jQuery css背景位置更改两次

Question

我基本上是在尝试以相当快的速度连续两次更改 div 上的背景位置。这是我当前的代码：

$('.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 
    });

正在发生的只是第二次变化。第一个似乎根本没有受到影响。

我会注意到我需要使用 jQuery 来完成，理想情况下我更喜欢将 jquery .css 更改包装在一个函数中，然后调用当前 jQuery .css 更改的内容。

我也尝试了一个长字符串版本，但还是不行。

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

这是我所在位置的实时版本：http://faithandsony.co.uk/sony_accordion_hover-hightlight/

提前感谢您的任何回答。我随时准备回答任何问题。

Answer 1

这可能只是时间问题。您可以使用简单的timeout() 在第二个之前执行第一个，使第二个 CSS 更改在执行前等待 1000 毫秒（或 1 秒）。

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

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

---

或者，将第一个的延迟保持在 2000，并将第二个更改为 4000，给出：

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

Answer 2

延迟仅适用于动画，

为了继续使用，只需做一个空动画

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

如果它不适用于空 {}，请尝试为哑参数设置动画 如果您总是通过示例 margin:0 获得，则为他设置动画：

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