.Animate () के कॉलबैक को दो बार jquery कहा जाता है

Question

चूँकि मैंने कुछ-कुछ जोड़ा scrollTop, मेरे कॉलबैक के कुछ हिस्सों को दो बार बुलाया:

$('html, body').animate({scrollTop: '0px'}, 300,function() {
    $('#content').load(window.location.href, postdata, function() {                 
        $('#step2').addClass('stepactive').hide().fadeIn(700, function() {
            $('#content').show('slide',800);                    
        });
    });
});

यह केवल दोहराने के लिए लगता है .show(), कम से कम मुझे यह आभास नहीं है कि load()या .fadeIn()दूसरी बार भी बुलाया जाता है। .show()जैसे ही यह पहली बार के लिए समाप्त हो गया है बार-बार हो जाता है। 0जिस तरह से मदद नहीं करने के लिए स्क्रॉलटॉप एनीमेशन-गति सेट करना !

मुझे लगता है कि इसका एनीमेशन-कतार से कुछ लेना-देना है, लेकिन मैं यह नहीं पता लगा सकता कि वर्कअराउंड कैसे पाया जाए और विशेष रूप से ऐसा क्यों हो रहा है।

Answer 1

animateआपके द्वारा कॉल किए जाने वाले सेट में प्रत्येक तत्व के लिए एक बार इसका कॉलबैक animate:

अगर इसकी आपूर्ति, start, step, progress, complete, done, fail, और alwaysकॉलबैक एक पर कहा जाता है प्रति-तत्व आधार ...

चूंकि आप दो तत्वों ( htmlतत्व, और bodyतत्व) को एनिमेट कर रहे हैं , इसलिए आपको दो कॉलबैक मिल रहे हैं। (किसी को भी आश्चर्य है कि ओपी दो तत्वों को क्यों आकर्षित कर रहा है, यह इसलिए है क्योंकि एनीमेशन bodyकुछ ब्राउज़रों पर काम करता है, लेकिन htmlअन्य ब्राउज़र पर।

एनीमेशन पूरा होने पर एक सिंगल कॉलबैक प्राप्त करने के लिए , animateडॉक्स आपको promiseएनीमेशन कतार के लिए एक वादा प्राप्त करने के लिए विधि का उपयोग करते हुए इंगित करता है, फिर thenकॉलबैक को कतार में लाने के लिए:

$("html, body").animate(/*...*/)
    .promise().then(function() {
        // Animation complete
    });

(नोट: केविन बी ने इस सवाल का जवाब देने के लिए अपने जवाब में बताया । मैंने चार साल बाद तक जब मैंने इस पर गौर नहीं किया, तब तक वह गायब था, इसे जोड़ा और फिर केविन का जवाब देखा। कृपया अपना जवाब दें। प्यार यह योग्य है। मुझे लगा कि यह स्वीकृत उत्तर है, मुझे इसे छोड़ देना चाहिए।)

यहाँ एक उदाहरण दोनों व्यक्तिगत तत्व कॉलबैक और समग्र कॉलबैक दिखा रहा है:

jQuery(function($) {

  $("#one, #two").animate({
    marginLeft: "30em"
  }, function() {
    // Called per element
    display("Done animating " + this.id);
  }).promise().then(function() {
    // Called when the animation in total is complete
    display("Done with animation");
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

<div id="one">I'm one</div>
<div id="two">I'm two</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Comments

हाँ, यही कारण था और वास्तव में मुझे याद नहीं आया कि मैंने कभी क्यों लिखा html, body। मेरे दिमाग को वापस चालू करने का समय। धन्यवाद

— बेनामी

शायद इसलिए कि html को एनिमेट करना वेबकिट में काम नहीं करेगा, और ओपेरा में सिर्फ बॉडी काम नहीं करेगी। दोनों का उपयोग करना सुनिश्चित करेगा कि यह हमेशा काम करता है, लेकिन फ़ायरफ़ॉक्स में कॉलबैक को दो बार ट्रिगर करेगा। (मुझे ब्राउज़र गलत मिल सकते हैं ...)

— जॉन गेंजेंगट

htmlIE के लिए आवश्यक है, और अधिकांश अन्य ब्राउज़रों के लिए कॉलबैक दो बार फायर करेगा। मैं उसी समस्या के समाधान के लिए काम कर रहा हूं।

— साइमन रॉब

मैंने एक झंडा बनाकर इससे निपटा: var ranOne = false; $('body,html').animate({ scrollTop: scrollTo }, scrollTime, 'swing', function () { if (ranOne) { ...action... ranOne = false; } else { ranOne = true; } }); यह हैकी लगता है, लेकिन "बॉडी, एचटीएमएल" का उपयोग करने के लिए पहली जगह में हैकी की तरह है, इसलिए। (लाइन टूटने की कमी के लिए खेद है, अनुमान लगाते हैं कि टिप्पणियां उन्हें नहीं दिखाती हैं)

— स्पिन

अविश्वसनीय! मैंने अपनी स्क्रॉलिंग एनीमेशन को ठीक से $ ("html, बॉडी") बनाने के लिए घंटों बिताए ताकि यह दो बार फायर न करे, और यह उत्तर मुझे बचा रहा है! धन्यवाद!

— वसीली हॉल

Answer 2

एकाधिक तत्व एनिमेशन के पूरा होने के लिए एक एकल कॉलबैक प्राप्त करने के लिए, आस्थगित वस्तुओं का उपयोग करें।

$(".myClass").animate({
  marginLeft: "30em"
}).promise().done(function(){
  alert("Done animating");
});

वादा और आस्थगित वस्तुओं के विस्तृत विवरण के लिए jQuery एपीआई देखें ।

Comments

यह इस समस्या का समाधान है कि हम एनीमेशन को समाप्त करने के लिए क्या करना चाहते हैं, लेकिन दो बार कॉल के बारे में जारी करें और उसके लिए +1 प्राप्त करें, लेकिन मुझे नहीं पता कि चेतन प्रक्रिया को दो बार कहा जाता है या नहीं ?!

— क्मामास्टर

चेतन प्रक्रिया को दो बार नहीं बुलाया जाता है, प्रत्येक चयनित तत्व के लिए एक बार कॉलबैक कहा जाता है। इसलिए, यदि आप 8 सूची आइटम का चयन करते हैं और उन्हें बाईं ओर चेतन करते हैं, तो कॉलबैक को 8 बार निष्पादित किया जाएगा। मेरा समाधान आपको सभी 8 समाप्त होने पर एक कॉलबैक देता है।

— केविन बी

@ केविनबी, अच्छा समाधान, और इसने मेरी कॉलबैक समस्याओं को भी हल करने में मदद की। धन्यवाद।

— लेलिस

मुझे लगा कि यह एक पेचीदा जवाब है, लेकिन दुर्भाग्य से इसके अनपेक्षित परिणाम हैं। वादा सिर्फ कॉलबैक निष्पादन में देरी नहीं करता है जब तक कि jQuery सेट के तत्वों ने वर्तमान एनीमेशन को समाप्त नहीं किया है (जो कि बहुत अच्छा होगा)। सेट के सभी लंबित एनिमेशन किए जाने के बाद ही इसे हल किया जाता है। इसलिए यदि पहला एनीमेशन अभी भी चल रहा है तो दूसरा एनीमेशन सेट किया गया है, पहले एनीमेशन के लिए इच्छित कॉलबैक तब तक नहीं चलता जब तक कि दूसरा एनीमेशन खत्म नहीं हो जाता। देखें इस बिन ।

— हैशचेंज

यह सही है, यह चयनित तत्वों के लिए सभी वर्तमान एनिमेशन के पूरा होने का इंतजार करता है । यह केवल इस श्रृंखला में शुरू किए गए लोगों के लिए इंतजार करने के लिए पर्याप्त स्मार्ट नहीं है (और न ही यह होना चाहिए)

— केविन बी