同时运行两个jQuery函数答案

【问题标题】：Run two jQuery functions at the same time同时运行两个jQuery函数
【发布时间】：2013-03-15 09:30:45
【问题描述】：

我正在使用 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
    });
});

fade 和 slide 发生在不同的时间，第 5 行和 slide 似乎同时发生。

【问题讨论】：

回答您的问题：“是”
只是在回调中为它们设置动画应该让它们同时运行？
您使用的是旧版 IE 吗？
@vol7ron 不，Chrome。不知道为什么有人想使用旧的 IE，除了由于某种原因他们无法安装另一个浏览器。
@JeffShaver 好吧，它们都发生在 .click() 的回调中

标签： javascript jquery

【解决方案1】：

如果你这样做，它们应该一起运行：

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

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

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：

我不明白这与我发布的代码有何不同。我看不出有什么区别。

【解决方案3】：

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

       });
  });

【讨论】：

【解决方案4】：

如果你设置一个小提琴会更好。如果你的 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
    });
});

【讨论】：