.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, এবং alwayscallbacks একটি ডাকা হয় প্রতি-উপাদান ভিত্তি ...

যেহেতু আপনি দুটি উপাদান ( htmlউপাদান এবং bodyউপাদান) অ্যানিমেট করছেন , আপনি দুটি কলব্যাক পাচ্ছেন। (যে কেউ কেন ভাবছেন যে কেন ওপি দুটি উপাদান অ্যানিমেট করছে, কারণ অ্যানিমেশনটি bodyকয়েকটি ব্রাউজারে তবে htmlঅন্য ব্রাউজারগুলিতে কাজ করে ))

অ্যানিমেশনটি সম্পূর্ণ হওয়ার পরে একটি একক কলব্যাক পেতে , animateডকসগুলি promiseঅ্যানিমেশন কাতারের জন্য কোনও প্রতিশ্রুতি পাওয়ার জন্য পদ্ধতিটি এবং তারপরে thenকলব্যাকটি সারি করার জন্য আপনাকে নির্দেশ করে :

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

(দ্রষ্টব্য: কেভিন বি এই নির্দিষ্ট তার উত্তরে যখন প্রশ্ন প্রথম জিজ্ঞাসা করা হল যখন আমি লক্ষ্য করেছি এটা অনুপস্থিত ছিল, এটি যোগ আমি চার বছর পর পর্যন্ত না, এবং ... তারপর কেভিন এর উত্তর দেখেছি তার উত্তর দিতে দয়া করে।। এটির প্রাপ্য প্রেম করুন I এটি গ্রহণযোগ্য উত্তর হিসাবে আমি বুঝতে পেরেছিলাম, আমার এটিকে ছেড়ে দেওয়া উচিত))

পৃথক উপাদান কলব্যাক এবং সামগ্রিকভাবে সমাপ্তি কলব্যাক উভয়ই এখানে দেখানোর উদাহরণ রয়েছে:

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আইই এর জন্য প্রয়োজনীয়, এবং বেশিরভাগ অন্যান্য ব্রাউজারের জন্য কলব্যাক দু'বার প্রবাহিত হবে। আমি একই সমস্যার সমাধানের জন্য চেষ্টা করার চেষ্টা করছি।

— সাইমন রব

আমি একটি পতাকা তৈরি করে এটির সাথে মোকাবিলা করেছি: var ranOne = false; $('body,html').animate({ scrollTop: scrollTo }, scrollTime, 'swing', function () { if (ranOne) { ...action... ranOne = false; } else { ranOne = true; } }); এটি হ্যাকি অনুভব করে তবে "বডি, এইচটিএমএল" ব্যবহার করা প্রথম ধরণের হ্যাকি। (রেখা বিরতির অভাবের জন্য

— এচ

অবিশ্বাস্য! আমি আমার স্ক্রোলিং অ্যানিমেশনটি $ ("এইচটিএমএল, বডি") দিয়ে সঠিকভাবে কাজ করার চেষ্টা করে ঘন্টা ব্যয় করেছি যাতে এটি দু'বার ছড়িয়ে না যায় এবং এই উত্তরটি আমাকে রক্ষা করেছিল! ধন্যবাদ!

— ভ্যাসিলি হল

Answer 2

একাধিক উপাদান অ্যানিমেশন সমাপ্তির জন্য একটি একক কলব্যাক পেতে, পিছিত অবজেক্ট ব্যবহার করুন।

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

প্রতিশ্রুতি এবং মুলতুবি বস্তুর বিশদ বিবরণের জন্য jQuery এপিআই দেখুন ।

Comments

এটি অ্যানিমেশন শেষ করতে আমরা কী করতে চাই তা নিয়ে সমস্যার সমাধান করা হয়েছে তবে এর জন্য দু'বার কল এসেছে এবং এটির জন্য +1 পেয়েছে, তবে আমি জানি না যে অ্যানিমেট প্রক্রিয়াটি দু'বার বলা হয় কিনা ?!

— কিউমাস্টার 11 '17

অ্যানিমেট প্রক্রিয়াটি দু'বার কল করা হয় না, প্রতিটি নির্বাচিত উপাদানগুলির জন্য একবার কলব্যাক কল করা হয়। সুতরাং, আপনি যদি 8 টি তালিকা আইটেম নির্বাচন করেন এবং সেগুলি বামে সঞ্জীবিত করেন, কলব্যাকটি 8 বার কার্যকর হবে। আমার সলিউশনটি যখন 8 টি শেষ হয় তখন আপনাকে একটি একক কলব্যাক দেয়।

— কেভিন বি 14

@ কেভিনবি, ভাল সমাধান এবং এটি আমার নিজের কলব্যাকের সমস্যাগুলিও সমাধান করতে সহায়তা করেছে। ধন্যবাদ।

— লিসিলেস

আমি ভেবেছিলাম এটি একটি উদ্বেগজনক উত্তর, তবে দুর্ভাগ্যক্রমে এর অনিচ্ছাকৃত পরিণতি হয়েছে। প্রতিশ্রুতিটি কেবল কলব্যাকের প্রয়োগে বিলম্বিত করে না যতক্ষণ না জিক্যুয়ারি সেট এর উপাদানগুলি অ্যানিমেশনটি বর্তমান অ্যানিমেশনটি শেষ না করে (যা দুর্দান্ত হবে)। সেটটির সমস্ত মুলতুবি অ্যানিমেশনগুলি সম্পন্ন করার পরে এটি সমাধান করা হবে । সুতরাং প্রথম চলমান চলাকালীন যদি দ্বিতীয় অ্যানিমেশন সেট করা থাকে তবে দ্বিতীয় অ্যানিমেশনটি শেষ না হওয়া পর্যন্ত প্রথম অ্যানিমেশনের জন্য কলব্যাক চলবে না। এই বিনটি দেখুন ।

— হ্যাশচেঞ্জ 12'15

এটি সঠিক, নির্বাচিত উপাদানগুলির জন্য এটি সমস্ত বর্তমান অ্যানিমেশনগুলি সম্পূর্ণ হওয়ার জন্য অপেক্ষা করে। কেবল এই চেইনে শুরু হওয়া ব্যক্তিদের অপেক্ষা করার জন্য এটি যথেষ্ট স্মার্ট নয় (এটি হওয়া উচিত নয়)

— কেভিন বি