কীভাবে একই সাথে দুটি jQuery অ্যানিমেশন চালানো যায়?

Question

একই সাথে দুটি পৃথক উপাদানে দুটি অ্যানিমেশন চালানো কি সম্ভব? আমার এই প্রশ্নের বিপরীতে দরকার জ্যাকারি ক্যুইং অ্যানিমেশন ।

আমাকে এরকম কিছু করা দরকার ...

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

তবে একই সাথে দুটি চালাতে। আমি কেবল ভাবতে পারি যে setTimeoutপ্রতিটি অ্যানিমেশনের জন্য একবার ব্যবহার করা হবে তবে আমি মনে করি এটি সেরা সমাধান নয়।

Comments

এরম ... তুমি কি চেষ্টা করেছ? আপনি যদি সেখানে সঠিক কোডটি ব্যবহার করেন তবে আমার animate()কাজটি কীভাবে কাজ করে তা বোঝার জন্য সেগুলি একই সাথে চালানো উচিত।

— বিশৃঙ্খলা

এখানে আমরা যাই - jsbin.com/axata । কোডটি দেখতে যোগ / সম্পাদনা করুন

— রাশ ক্যাম

বিভিন্ন CSS বৈশিষ্ট্য অ্যানিমেট করার সময় আমার একটি আসল সমস্যা আছে have এই প্রশ্নটি পুরানো দেখাচ্ছে, এবং আমি এটি জেএসফিডেলে রেখেছি বলে মনে হচ্ছে উভয় পদ্ধতির কাজ। এটি কি এখনও প্রাসঙ্গিক? jsfiddle.net/AVsFe

— ভাল

বর্তমান jquery এ, এবং আমি বিশ্বাস করি jQuery 1.4 সাল থেকে, উপরের কোডটি একই সাথে উভয়ই প্রাণবন্ত হতে পারে, যেহেতু আপনি fx সারিতে যে উপাদানটিকে অ্যানিম্যাট () বলে থাকেন তার সাথে সংযুক্ত থাকে, এটি কোনও বিশ্বব্যাপী সারি নয়।

— ক্রিস মোসচিনি

উপরে জেসবিন মারা গেছে। 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 এ কোনও ফাংশন পাস করার উদ্দেশ্য কী?

— পিলাউ

@ পিলাউ ডকুমেন্ট প্রস্তুত হওয়ার পরে এটি কার্যকর করা হবে। এটি $ (দস্তাবেজ) এর জন্য একটি শর্টহ্যান্ড readyডিয়ার (ফাংশন () {}); এবং আপনাকে আপনার জাভাস্ক্রিপ্ট কোডটিকে আপনার উপাদান সংজ্ঞা দেওয়ার আগে রাখতে সক্ষম করে।

— রাফেল মিশেল

হ্যাঁ, আপনি ক্রেটারটিকে সত্য / মিথ্যাতে সেট করতে পারেন, বা এটিকে একটি স্ট্রিং (সারিতে নাম) দিতে পারেন, উভয় অ্যানিমেশন একই টাইমার ব্যবহার করে ...

— আলেকস

আপনি কীভাবে এটিতে একটি অনম্পল্ট যুক্ত করবেন?

— jmchauv

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 (অস্বচ্ছ, দৃশ্যমান) এর সমস্ত অনুচ্ছেদে অ্যানিমেট করে। এটি এটি সারির বাইরেও করবে, অর্থাত এটি তার পরিবর্তনের জন্য অপেক্ষা না করে স্বয়ংক্রিয়ভাবে শুরু হবে ।

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

কেবল যোগ করুন: queue: false।

Comments

এই এক সম্পূর্ণ ফাংশন সংহত কিভাবে? : s

— Brainfeeder

Answer 4

আপনি যদি উপরেরটিকে সেগুলি হিসাবে চালনা করেন তবে তারা একই সাথে চলবে appear

এখানে কিছু পরীক্ষার কোড দেওয়া হল:

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

আরও অ্যানিমেশনগুলিকে 'মাই-অ্যানিমেশন' কাতারে যুক্ত করা যেতে পারে এবং সর্বশেষ এনিমেশনগুলির সন্ধান পাওয়া গেলে সমস্ত শুরু করা যেতে পারে।

চিয়ার্স, অ্যান্টনি

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

— ফিলিহোতে

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

শুভ কোডিং!