एक साथ दो jQuery एनिमेशन कैसे चलाएं?

Question

क्या एक साथ दो अलग-अलग तत्वों पर दो एनिमेशन चलाना संभव है? मुझे इस प्रश्न के विपरीत की आवश्यकता है Jquery कतारबद्ध एनिमेशन ।

मुझे ऐसा कुछ करने की ज़रूरत है ...

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

लेकिन एक ही समय में उन दोनों को चलाने के लिए। केवल एक चीज जिसके बारे में मैं सोच सकता था, वह setTimeoutप्रत्येक एनीमेशन के लिए एक बार उपयोग करना होगा , लेकिन मुझे नहीं लगता कि यह सबसे अच्छा समाधान है।

Comments

एर्म ... क्या आपने इसे आज़माया है? यदि आप मेरे पास मौजूद सटीक कोड का उपयोग करते हैं, तो मेरी समझ में कैसे animate()काम करता है, उन्हें एक साथ चलना चाहिए।

— अराजकता

ये हम चले - jsbin.com/axata । कोड देखने के लिए जोड़ें / संपादित करें

— Russ Cam

विभिन्न CSS गुणों को एनिमेट करते समय मुझे एक वास्तविक समस्या है। यह प्रश्न पुराना लग रहा है, और मैंने इसे JSFiddle में रखा, लगता है दोनों दृष्टिकोण काम करते हैं। क्या यह अभी भी प्रासंगिक है? jsfiddle.net/AVsFe

— valk

वर्तमान jquery में, और मेरा मानना ​​है कि jQuery 1.4 के बाद से, उपरोक्त कोड एक साथ दोनों को चेतन करता है, क्योंकि fx कतारें उस तत्व से जुड़ी होती हैं जिसे आप .animate () कहते हैं, वैश्विक कतार नहीं।

— क्रिस मोसचिनी

ऊपर jsbin मर चुका है। उसी का jsfiddle, जो काम करता है: jsfiddle.net/b9chris/a8pwbhx1

— क्रिस मोसचिनी

Answer 1

हाँ वहाँ है!

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

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

Comments

इसके लिए धन्यवाद, उस queueचर के बारे में नहीं पता था !

— बिंदी

क्या मैं पूछ सकता हूं कि jQuery के लिए एक फ़ंक्शन पास करने का उद्देश्य क्या है?

— पिलाउ

@ पिलाऊ यह डॉक्यूमेंट तैयार होने पर निष्पादित किया जाएगा। यह $ (दस्तावेज़) के लिए एक शॉर्टहैंड है। पहले से ही (फ़ंक्शन () {}); और आपको अपनी तत्व परिभाषा से पहले अपना जावास्क्रिप्ट कोड डालने में सक्षम बनाता है।

— राफेल मिशेल

हां, आप सत्य / असत्य पर कतार को खा सकते हैं, या इसे एक स्ट्रिंग (कतार-नाम) दे सकते हैं, दोनों एनिमेशन एक ही टाइमर का उपयोग करते हैं ...

— एलेक्सा

आप इस पर एक ऑनकाले कैसे जोड़ेंगे?

— जेमचव

Answer 2

वह साथ-साथ हाँ में चलेगा। क्या होगा यदि आप एक ही तत्व पर दो एनिमेशन एक साथ चलाना चाहते हैं?

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

यह एनिमेशन को पंक्तिबद्ध करता है। उन्हें एक साथ चलाने के लिए आप केवल एक लाइन का उपयोग करेंगे।

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

क्या एक ही तत्व पर एक साथ दो अलग एनीमेशन चलाने का कोई और तरीका है?

Answer 3

मेरा मानना ​​है कि मुझे jQuery प्रलेखन में समाधान मिला:

50 की बाईं शैली के सभी पैराग्राफ और 1 (अपारदर्शी, दृश्यमान) की अस्पष्टता को एनिमेशन करता है, 500 मिली सेकेंड के भीतर एनीमेशन को पूरा करता है। यह इसे कतार के बाहर भी करेगा, जिसका अर्थ है कि यह स्वचालित रूप से अपनी बारी का इंतजार किए बिना शुरू हो जाएगा ।

$( "p" ).animate({
  left: "50px", opacity: 1
}, { duration: 500, queue: false }); 

बस जोड़ें queue: false:।

Comments

इस पर पूरा फ़ंक्शन कैसे एकीकृत करें? : एस

— ब्रेनफीडर

Answer 4

यदि आप ऊपर के रूप में वे कर रहे हैं चलाने के लिए, वे एक साथ चलाने के लिए दिखाई देगा।

यहाँ कुछ परीक्षण कोड है:

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

Answer 5

हालांकि यह सच है कि चेतन को लगातार कॉल करने से वे एक ही समय में दिखाई दे रहे हैं, अंतर्निहित सच्चाई यह है कि वे विशिष्ट एनिमेशन हैं जो समानांतर के बहुत करीब चल रहे हैं।

एनिमेशन का बीमा करने के लिए वास्तव में उसी समय उपयोग में चल रहे हैं:

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

इसके अलावा एनिमेशन को 'my-एनीमेशन' कतार में जोड़ा जा सकता है और सभी को अंतिम एनीमेशन dequeue की शुरुआत प्रदान की जा सकती है।

चीयर्स, एंथोनी

Answer 6

वस्तुओं में मूल्यों को एनिमेट करने के बारे में इस शानदार ब्लॉग पोस्ट को देखें .. फिर आप जो भी चाहें उसे मानों का उपयोग कर सकते हैं, एक साथ 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');
                }
            });
        }

Comments

मृत लिंक, इसे वापस web.archive.org/web/20150101065437/http://www.josscrowcroft.com/…

— PhiLho

Answer 7

किसी की मदद करने के लिए मेरे जवाब को पोस्ट करते हुए, शीर्ष रेटेड उत्तर ने मेरी योग्यता को हल नहीं किया।

जब मैंने निम्नलिखित [शीर्ष उत्तर से] लागू किया, तो मेरे ऊर्ध्वाधर स्क्रॉल एनीमेशन ने आगे-पीछे घबराहट की:

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

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

मैंने कहा: डब्ल्यू 3 स्कूल सेट इंटरवल और इसने मेरी समस्या हल कर दी, जिसका नाम है 'सिंटेक्स' खंड:

सेटइंटरवल (कार्य, मिलीसेकंड, परम 1, परम 2, ...)

फार्म के मेरे मापदंडों को { duration: 200, queue: false }शून्य की अवधि के लिए मजबूर किया और यह केवल मार्गदर्शन के लिए मापदंडों को देखा।

लंबे और छोटे, यहां मेरा कोड है, अगर आप यह समझना चाहते हैं कि यह क्यों काम करता है, लिंक पढ़ें या अंतराल अपेक्षित मापदंडों का विश्लेषण करें:

var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;

function configureRepeats() {
   window.setInterval(function () {
       autoScroll($scrollDiv, $scrollSpeed);
   }, $interval, { queue: false });
};

कहां 'ऑटोस्क्रोल' है:

    $($scrollDiv).animate({
        scrollTop: $($scrollDiv).get(0).scrollHeight
    }, { duration: $scrollSpeed });

    //Scroll to top immediately 
    $($scrollDiv).animate({
        scrollTop: 0
    }, 0);

हैप्पी कोडिंग!