1

私は基本的に div の background-position をかなり素早く連続して 2 回変更しようとしています。私の現在のコードは次のとおりです。

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

何が起こっているかというと、2 番目の変更が行われているだけです。最初のものはまったく影響を受けていないようです。

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

これは単にタイミングの問題である可能性があります。2 番目の CSS 変更を実行する前に 1000 ミリ秒 (または 1 秒) 待機させることで、最初の変更を 2 番目の変更の前に簡単timeout()に実行できます。

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

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

または、最初の遅延を 2000 のままにして、2 番目を 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 に答える