如何同時運行兩個jQuery的動畫？

195

是否有可能在兩個不同的元素同時運行兩個動畫？我需要這個問題的反面Jquery queueing animations。如何同時運行兩個jQuery的動畫？

我需要做這樣的事情...

$('#first').animate({ width: 200 }, 200); 
$('#second').animate({ width: 600 }, 200);

，但在同一時間運行這兩個。我能想到的唯一的事情將使用setTimeout一次爲每個動畫，但我不認爲這是最好的解決辦法。

來源

2009-08-09 Jakub Arnold

動畫不同的CSS屬性時，我有一個真正的問題。這個問題看起來很老，我把它放在JSFiddle中，似乎兩種方法都有效。這仍然是相關的？ http://jsfiddle.net/AVsFe/ – valk 2013-10-21 19:57:18

在當前的jQuery中，我相信自jQuery 1.4以來，上面的代碼會同時執行動畫，因爲fx隊列被附加到您調用.animate（）的元素上，而不是全局隊列。 – 2014-12-05 18:39:41

呃......你試過了嗎？如果你使用你在那裏的確切代碼，爲了理解'animate（）'是如何工作的，它們應該同時運行。 – chaos 2009-08-09 12:36:43

390

是的！

$(function() { 
    $("#first").animate({ 
     width: '200px' 
    }, { duration: 200, queue: false }); 

    $("#second").animate({ 
     width: '600px' 
    }, { duration: 200, queue: false }); 
});

來源

2011-01-17 23:31:43 Joshua

+11

感謝你，不知道'隊列'變量！ – dotty 2011-07-01 11:03:33

我可以問一下將函數傳遞給jQuery的目的是什麼？ – pilau 2013-05-05 10:13:37

@pilau當文檔準備就緒時它將被執行。這是$（document）.ready（function（）{}）的簡寫形式;並使您能夠在您的元素定義之前放置您的JavaScript代碼。 – 2013-05-08 17:31:20

如果按照原樣運行上述內容，它們將顯示爲以同時方式運行。

下面是一些測試代碼：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script> 
$(function() { 
    $('#first').animate({ width: 200 }, 200); 
    $('#second').animate({ width: 600 }, 200); 
}); 
</script> 
<div id="first" style="border:1px solid black; height:50px; width:50px"></div> 
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>

來源

2009-08-09 12:38:10

這將同時運行是的。如果你想在同一元素上同時運行兩個動畫是什麼？

$(function() { 
    $('#first').animate({ width: '200px' }, 200); 
    $('#first').animate({ marginTop: '50px' }, 200); 
});

這最終排隊動畫。去同時運行它們，你會只用一條線。

$(function() { 
    $('#first').animate({ width: '200px', marginTop:'50px' }, 200); 
});

是否有任何其他方式同時在同一個元素上運行兩個不同的動畫？

來源

2009-11-03 11:25:57 Waseem

我相信我發現了jQuery文檔中的解決方案：

動畫處理的所有段落左風格的50 和1不透明度（不透明，可見），完成內動畫 500毫秒。 它還將做到這一點的隊列之外，這意味着它會自動啓動，而不等待輪到。
$("p").animate({ 
    left: "50px", opacity: 1 
}, { duration: 500, queue: false }); 

只需添加：queue: false。

來源

2011-04-07 23:35:48 user697709

如何將完整的功能集成在這一個上？：s – Brainfeeder 2013-03-26 08:49:01

看到這個輝煌的博客文章關於在對象中設置動畫值..然後你可以使用這些值來動畫你喜歡的任何東西，100％同時！

http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/

我用它像這樣在滑動輸入/輸出：

 slide : function(id, prop, from, to) { 
      if (from < to) { 
       // Sliding out 
       var fromvals = { add: from, subtract: 0 }; 
       var tovals = { add: to, subtract: 0 }; 
      } else { 
       // Sliding back in 
       var fromvals = { add: from, subtract: to }; 
       var tovals = { add: from, subtract: from }; 
      } 

      $(fromvals).animate(tovals, { 
       duration: 200, 
       easing: 'swing', // can be anything 
       step: function() { // called on every step 
        // Slide using the entire -ms-grid-columns setting 
        $(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr'); 
       } 
      }); 
     }

來源

2012-08-16 23:19:26

無效鏈接，請訪問https://web.archive.org/web/20150101065437/http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-元素值＃ – PhiLho 2015-10-22 16:38:09

雖然這是真的，連續通話動畫會給他們是在同一時間運行的外觀上來看，潛在的事實是它們是非常接近並行的獨特動畫。

爲了確保動畫在同一時間使用確實運行：

$(function() { 
    $('#first').animate({..., queue: 'my-animation'}); 
    $('#second').animate({..., queue: 'my-animation'}).dequeue('my-animation'); 
});

而且動畫可以被添加到「我的動畫」隊列，都可以開始提供動畫的上一個出隊是他們。

乾杯，安東尼

來源

2017-02-11 23:01:56 Borgboy

如何同時運行兩個jQuery的動畫？

回答

相關問題