Javascript 同时运行两个jQuery函数

我使用jQuery来滑动某些内容并淡出其他内容，但在测试过程中，我注意到在滑动发生后淡出的时间过长。 换句话说，有足够的滞后是显而易见的

我只是想说清楚，这两个项目，我滑动一个和褪色的其他是不同的元素，我不能使用链接

有没有办法让这些函数同时运行或更紧密地一起运行，使它们看起来是同时运行的

以下是我正在使用的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行和幻灯片似乎同时发生。

如果您喜欢，它们应该一起运行：

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

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

试试这个

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

---

为动画指定时间1000如果设置小提琴会更好。

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

       });
  });

如果您的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
    });
});

---

回答你的问题：“是的”只是在回调中不设置动画应该可以使它们同时运行？你使用的是旧IE吗？@vol7ron Nope，Chrome。不知道为什么会有人想使用旧的IE，除了因为某种原因不能安装另一个浏览器之外。@JeffShaver好吧，它们都发生在.click（）的回调中。我不明白这与我发布的代码有什么不同。我看不出有什么区别。