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

如果它不适用于空{}，请尝试为哑参数设置动画如果你总是得到例如保证金：0，动画他：

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

jQuery css后台位置改变两次

2 个答案: