Bagaimana menjalankan dua animasi jQuery secara bersamaan?

Apakah mungkin menjalankan dua animasi pada dua elemen berbeda secara bersamaan? Saya perlu kebalikan dari pertanyaan ini animasi antrian Jquery .

Saya perlu melakukan sesuatu seperti ini ...

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

tetapi untuk menjalankan keduanya pada saat yang sama. Satu-satunya hal yang dapat saya pikirkan adalah menggunakan setTimeoutsatu kali untuk setiap animasi, tetapi saya tidak berpikir itu adalah solusi terbaik.

ya ada!

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

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

Itu akan berjalan secara bersamaan ya. bagaimana jika Anda ingin menjalankan dua animasi pada elemen yang sama secara bersamaan?

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

Ini akhirnya mengantri animasi. untuk menjalankannya secara bersamaan, Anda hanya akan menggunakan satu baris.

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

Apakah ada cara lain untuk menjalankan dua animasi berbeda pada elemen yang sama secara bersamaan?

Saya yakin saya menemukan solusinya dalam dokumentasi jQuery:

Animasi semua paragraf ke gaya kiri 50 dan opacity 1 (buram, terlihat), menyelesaikan animasi dalam 500 milidetik. Ini juga akan melakukannya di luar antrian, artinya akan secara otomatis mulai tanpa menunggu gilirannya .

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

hanya menambahkan: queue: false.

Jika Anda menjalankan seperti di atas, mereka akan tampak berjalan secara bersamaan.

Berikut ini beberapa kode uji:

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

Meskipun benar bahwa panggilan beruntun untuk menghidupkan akan memberikan tampilan yang mereka jalankan pada saat yang sama, kebenaran mendasarnya adalah mereka memiliki animasi berbeda yang berjalan sangat dekat dengan paralel.

Untuk memastikan animasi benar-benar berjalan pada saat yang bersamaan, gunakan:

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

Animasi lebih lanjut dapat ditambahkan ke antrian 'animasi-saya' dan semua dapat diinisiasi dengan memberikan animasi terakhir.

Salam, Anthony

Lihat posting blog yang brilian tentang menjiwai nilai dalam objek .. Anda kemudian dapat menggunakan nilai untuk menghidupkan apa pun yang Anda suka, 100% secara bersamaan!

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

Saya telah menggunakannya seperti ini untuk meluncur masuk / keluar:

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

Posting jawaban saya untuk membantu seseorang, jawaban berperingkat teratas tidak menyelesaikan keraguan saya.

Ketika saya menerapkan yang berikut [dari jawaban atas], animasi gulir vertikal saya hanya naik-turun:

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

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

Saya merujuk ke: W3 Schools Set Interval dan itu memecahkan masalah saya, yaitu bagian 'Sintaks':

setInterval (fungsi, milidetik, param1, param2, ...)

Parameter saya pada formulir { duration: 200, queue: false }memaksa durasi nol dan hanya melihat parameter untuk panduan.

Yang panjang dan pendek, inilah kode saya, jika Anda ingin memahami mengapa ini bekerja, baca tautan atau analisis parameter interval yang diharapkan:

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

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

Di mana 'autoScroll' adalah:

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

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

Selamat coding!