İki jQuery animasyonu aynı anda nasıl çalıştırılır?

İki animasyonu aynı anda iki farklı öğe üzerinde çalıştırmak mümkün müdür? Bu sorunun tersine ihtiyacım var Jquery kuyruk animasyonlar .

Böyle bir şey yapmam gerek ...

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

ama bu ikisini aynı anda çalıştırmak. Aklıma gelen tek şey setTimeouther animasyon için bir kez kullanmak olurdu , ama bunun en iyi çözüm olduğunu düşünmüyorum.

Evet var!

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

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

Bu eşzamanlı olarak çalışır evet. aynı öğede aynı anda iki animasyon çalıştırmak isterseniz ne olur?

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

Bu animasyonları kuyruğa sokar. aynı anda çalıştırmak için sadece bir satır kullanırsınız.

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

Aynı öğede aynı anda iki farklı animasyon çalıştırmanın başka bir yolu var mı?

Çözüm jQuery belgelerinde buldum inanıyorum:

Tüm paragrafı 50 sol stile ve 1 opaklığa (opak, görünür) animasyon uygular ve animasyonu 500 milisaniye içinde tamamlar. Ayrıca kuyruk dışında yapacak, yani sıra beklemeden otomatik olarak başlayacak .

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

basitçe ekleyin: queue: false.

Yukarıdakileri oldukları gibi çalıştırırsanız, aynı anda çalışıyor gibi görünecektir.

İşte bazı test kodu:

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

Ardışık canlandırma çağrılarının aynı anda çalıştıkları görünümü vereceği doğru olsa da, altta yatan gerçek, paralelliğe çok yakın çalışan farklı animasyonlardır.

Animasyonların gerçekten aynı anda çalıştığından emin olmak için şunu kullanın:

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

'Animasyonum' kuyruğuna başka animasyonlar eklenebilir ve son animasyon sakat bırakmalarına bağlı olarak tümü başlatılabilir.

Şerefe, Anthony

Nesnelerdeki değerleri canlandırma ile ilgili bu parlak blog yayınına bakın .. daha sonra değerleri istediğiniz gibi% 100 aynı anda canlandırmak için kullanabilirsiniz!

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

İçeri / dışarı kaydırmak için böyle kullandım:

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

Birine yardım etmek için cevabımı göndererek, en çok puan alan cevap benim sorunumu çözmedi.

Aşağıdakileri [üst cevaptan] uyguladığımda, dikey kaydırma animasyonum ileri geri sarsıldı:

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

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

Ben anılacaktır: W3 Okulları Seti Aralığı ve, yani 'Dizimi' bölümü sorunumu çözdü:

setInterval (işlev, milisaniye, param1, param2, ...)

Formdaki parametrelerimi { duration: 200, queue: false }sıfır süre zorladı ve sadece rehberlik için parametrelere baktı.

Uzun ve kısa, işte benim kodum, neden çalıştığını anlamak istiyorsanız, bağlantıyı okuyun veya beklenen parametreleri analiz edin:

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

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

'AutoScroll' nerede:

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

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

Mutlu kodlama!