4

jQuery を使用して何かを下にスライドさせたり、他のものをフェードアウトさせたりしていますが、テスト中に、スライドが発生してからフェードが長すぎることに気付きました。つまり、目立つほどのラグがあります。

明確にするために、一方をスライドさせ、他方をフェードさせているこれら 2 つのアイテムは異なる要素であり、チェーンを使用することはできません。

これらの関数を同時に実行するか、より近くで実行して、同時に実行されているように見せる方法はありますか?

私が使用しているjQueryコードは次のとおりです。

$(document).ready(function(){
    $('#trigger').click( function(){         
        $(this).animate({ opacity: 0.0 });        // fade
        $('#carousel').animate({ top: '100px' }); // slide
        $('#pullrefresh').css('top', '-490px');   // line 5
        $('#detector').hide();                    // line 6
    });
});

フェードとスライドは別のタイミングで発生しています。5 行目とスライドは同時に発生しているように見えます。

4

4 に答える 4

2

次のようにすると、それらは一緒に実行されるはずです。

$('#element1').animate({
    opacity: 0.25,
    }, 1000, function() {
        // complete
});

$('#element2').animate({
    opacity: 0,
    }, 1000, function() {
        // complete
});
于 2013-03-15T01:13:45.173 に答える
1

これを試して

 $(document).ready(function(){
        $('#trigger').click( function(){         
            $(this).animate({ opacity: 0.0 },1000);        // fade
            $('#carousel').animate({ top: '100px' }); // slide
            $('#pullrefresh').css('top', '-490px');   // line 5
            $('#detector').hide();                    // line 6
        });
    });

animate の時間 1000 を指定します

于 2013-03-15T01:16:45.763 に答える
0 
   $(document).ready(function(){

       $('#trigger').click( function(){

           $.Deferred(function(dfr) {

              dfr.pipe(function() {
                  return  $(this).animate({ opacity: 0.0 }); // fade
              }).
              pipe(function() {
                  return $('#carousel').animate({ top: '100px' }); // slide
              })
              pipe(function() {
                  return $('#pullrefresh').css('top', '-490px'); // line 5
              }).
              pipe(function() {
                  return $('#detector').hide(); // line 6
              });

          }).resolve();

       });
  });
于 2013-03-15T01:30:45.163 に答える
0

フィドルを設定した方がいいでしょう。DOM が大きい場合は、事前にルックアップを行うことで遅延を最小限に抑えることができます。

$(document).ready(function(){
    $('#trigger').click( function(){
        var vars = { $this        : $(this),
                     $carousel    : $('#carousel'),
                     $pullrefresh : $('#pullrefresh'),
                     $detector    : $('#detector')
                   };

        vars.$this.animate({ opacity: 0.0 },1000);  // fade
        vars.$carousel.animate({ top: '100px' });   // slide
        vars.$pullrefresh.css('top', '-490px');     // line 5
        vars.$detector.hide();                      // line 6
    });
});
于 2013-03-15T01:30:45.647 に答える