Jquery animate sakla ve göster

Question

Bir bağlantıyı tıklattığımda aynı anda iki şeyin olmasını isterim. Yavaş yavaş Jquery dokümantasyonundan geçiyorum ama henüz neye ihtiyacım olduğunu öğrenemedim. İşte

Ben hizmetler tıklayın site Ben #slideshow div gizlemek ister ediyorum bağlamak ve yeni bir div değiştirmek benim için bir bağlantıdır.

Sadece slayt gösterisini hizmet bağlantısını tıklatmaya çalıştım, ancak bu, ya canlandırma işlevini yapar ya da her ikiside değil, bağlantılı html sayfasına gider. İkisini de nasıl başarabilirim?

Sadece aynı sayfada div'leri gizleyip göstermeme veya yeni bir html sayfasına gidersem farketmez. Ben sadece canlandırma fonksiyonuna sahip olmak ve içeriği saklarken içeriği değiştirmek istiyorum.

bu

ben

$(document).ready(function(){ 
    $("a.home").toggle(
    function(){ 
     $("#slideshow").animate({ height: 'hide', opacity: 'hide' }, 'slow'); 
    }, 
    function(){ 
     $("#slideshow").animate({ height: 'show', opacity: 'show' }, 'slow'); 
    } 
); 
}); 

$(document).ready(function(){ 
    $("a.services").toggle(
    function(){ 
     $("#slideshow2").animate({ height: 'show', opacity: 'show' }, 'slow'); 
    }, 
    function(){ 
     $("#slideshow2").animate({ height: 'hide', opacity: 'hide' }, 'slow'); 
    } 
); 
}); 

ev kullanıyorum ve hizmetler iki bağlantılar jquery kodu olduğunu ve #slideshow div gizlemek için tıklandığında hizmetlerini ister ve olurdu, slideshow2 div gösterecektir Gizli ve sonra birincisini değiştirin.

Adil bir miktar html var, bu yüzden kaynağım bağlantıdan görüntülemek daha kolay olabilir.

Answer 1

Güncelleme: Bu çözüm, yorumlarda takip eden bir soru takip edilerek güncellendi.

Göster/sakla yöntemlerinin callback method'unu kullanmalısınız.

$("a").click(function(){ 

    /* Hide First Div */ 
    $("#div1").hide("slow", function(){ 
    /* Replace First Div */ 
    $(this).replaceWith("<div>New Div!</div>"); 
    }); 

    /* Hide Second Div */ 
    $("#div2").hide("slow", function(){ 
    /* Replace Second Div */ 
    $(this).replaceWith("<div>New Div!</div>"); 
    }); 

    /* If you wanted to sequence these events, and only 
    hide/replace the second once the first has finished, 
    you would take the second hide/replace code-block 
    and run it within the callback method of the first 
    hide/replace codeblock. */ 

}); 

Geri arama yöntemi .show/.hide işlevlerinin ikinci parametresidir. .show/.hide yöntemi tamamlandığında çalıştırılır. Bu nedenle, kutunuzu kapatabilir/açabilirsiniz ve geri arama yönteminin içinden hemen sonra bir olay çalıştırın.