同时运行两个jQuery函数

我正在使用jQuery向下滑动某些内容并将其他内容淡出，但在测试中，我注意到滑动发生后褪色显得太长。 换句话说，有足够的延迟是显而易见的。

只是为了让自己清楚，我滑动的另外两个项目是不同的元素，我不能使用链接。

有没有办法让这些function同时或更近距离运行，以便它们看起来同时运行？

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

Answer 1

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

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

Answer 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

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

Answer 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 }); });