1

我基本上试图以相当快的速度连续两次改变 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/

提前感谢您的任何答案。我会回答任何问题。

4

2 回答 2

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');
于 2013-01-18T11:53:35.143 回答
0

延迟仅适用于动画，

为了保持它的使用，只需做一个空动画

$('.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);
于 2013-01-18T12:08:15.313 回答