Jquery ile Biri Ardından Diğerlerini Birleştir Anlık

Question

Sayfa yüklenirken sırayla birbiri ardına birden fazla div canlandırmaya çalışıyorum. Başka bir sayfaya gitmek için tıkladığımda, bunu tersten yapmak istiyorum. JQuery'de bunu nasıl ayarlayabilirim?

Answer 1

Kind (sadece pseudocode, ben bu işleri garanti etmiyoruz Not)

$("a").click(function() 
{ 
    var target = $(this).href; 
    // Do animation 
    // In the final completion callback, do 
    window.location.href = target; 
}); 

: Sen çizgisinde bir şey yaparak sayfanızdaki bağlantılar için bunu yapabilirdi Örnek jQuery'de canlandırmanın birçok yolu olduğundan, ancak basit bir örnek. http://jsfiddle.net/andrewwhitaker/p7MJv/

HTML:

<div id="animation-one">Hello!</div> 
<div id="animation-two">Jquery Animate!</div> 

CSS:

#animation-one, 
#animation-two 
{ 
    opacity:0; 
    top: 30px; 
    width: 400px; 
    height: 100px; 
    background-color:#00CCCC; 
    font-size:35pt; 
    position:absolute; 
} 

#animation-one 
{ 
    background-color:#CCCC33; 
    top:130px; 
} 

JavaScript:

burada çalışan örneğe bakın:

(sayfa yüklemesinde) iki <div> s, peş peşe animasyon

$("#animation-one").animate({ 
    opacity:1.0}, 700, 
    function() { 
     // Callback function: This is called when 'animation-one' 
     // is finished. 
     $("#animation-two").animate({ 
      opacity: 1.0 
     }, 700); 
    } 
); 

İşte bitenler:

• İki <div> s CSS ile sayfa üzerinde opacity: 0 sayfa, id animation-one ile <div> opaklık 1'e opaklık 0 700 milisaniyelik bir süre içinde animasyon yüklendiğinde
• animation-one s animasyonu bittikten sonra, başka bir (animation-two kimlikli) ile benzer bir animasyon başlatılmış. <div> dışarıda solan Şimdi

---

, benzerdir.Ben senin bağlantı sadece başka bir sayfaya yönlendirir farz ettik, bu yüzden animasyon tamamlanana kadar bunu bağlantının aşağıdaki askıya aldık:

Bu next-page bir kimliğe sahip bir bağlantı <a> sahip olduğu varsayılır, fakat gerçekten can herhangi seçici olmak:

HTML:

<a id="next-page" href="http://www.google.com">Google</a> 

JavaScript:

$("#next-page").click(function($event) { 
    $event.preventDefault(); 
    var href = $(this).attr("href"); 

    $("#animation-two").animate({ 
     opacity: 0}, 700, 
     function() { 
      // Callback function: This is called when 'animation-two' 
      // is finished. 
      $("#animation-one").animate({ 
       opacity: 0}, 700, 
       function() { 
        // Direct the user to the link's intended 
        // target. 
        window.location = href; 
       }); 
    }) 
}); 

İşte Happe olan budur Ning:

id next-page ile bağlantı tıklatıldığında

• , yukarıda tarif edildiği gibi benzer bir animasyon dizisi oluşur, ancak ters.
• Son animasyon gerçekleştikten sonra, bağlantı düzgün şekilde izlenir.

Yukarıdaki bağlantıyı görmemize yardımcı olacağımı düşünüyorum. Ayrıca, animate için dokümanları işaretleyip kontrol edin.

Bu yardımcı olur umarım!

Düzenleme: OP Aynı anda birden fazla <div> s animasyon istiyor çünkü başka örnek bir bağlantı ekleme: http://jsfiddle.net/andrewwhitaker/n3GEB/. Bu, ortak kodu işlevlere taşır ve umarım örneklemeyi daha kolay hale getirir.

Answer 2

jQuery animasyon işlevlerinin, son parametre olarak bir geri arama aldığını unutmayın. Animasyon tamamlandığında bu işlev çağrılır. Bu geri bildirimde bir sonraki DIV'yi canlandırmaya başlayacaktın. Başka bir seçenek fxQueues olacaktır.

Sayfadan ayrılırken animasyonu tersine çevirmenin mükemmel bir yolu yoktur. size bir vermek sert

Answer 3

Geri aramaları ve sıraları kullanarak bakardım.

bu bir göz atın:

jQuery queue events http://api.jquery.com/queue/

Umut bu sizin için doğru yönde atılmış bir noktadır.