Slayt ve jQuery geçiş işlevi ile bir DİV içinde denedim ama sonuç hep animasyonun başlangıç ve/veya sonunda ürkek. İşte kullandığım js kodu:

$(document).ready(function(){
    $('#link1').click(
        function() {
            $('#note_1').parent().slideToggle(5000);
        }
);

Ve HTML

<div class="notice">
    <p>Here's some text. And more text. <span id="link1">Test1</span></p>
    <div class="wrapper">
        <div id="note_1">
            <p>Some content</p>
            <p>More blalba</p>
        </div>
    </div>
</div>

Ayrıca tam bir örneği burada görebilirsiniz: jQuery Slide test

Ben genellikle Mootools kullanmak ve herhangi bir sorun olmadan bu slayt yapabilirim. Ama Django ile yeni bir proje başladım ve en Django kullanmak jQuery uygulaması. jQuery vs Mootools bunu okuduktan sonra ve jQuery kullanmaya başlamak için iyi bir fırsat olacak karar verdim. Bu yüzden ilk benim ihtiyacım bu DİV slayt oldu. Ve düzgün işe yaramadı.

Daha fazla araştırma yaptım ve bu kenar boşluğu ve dolgu ile bir WordPress kullanmak eski bir bug DİV uygulanan buldum. Çözümü başka bir DİV içinde DİV sarmak için. Benim durumumda şeyi çözmek değil.

Arama daha bu post Slidedown animation jumprevisited buldum. O diğer bir ucunda ama bir atlama düzeltme (Test2jQuery Slide test).

Yığın Taşması bu jQuery IE jerky slide animation buldum. Yorum sorun bu DİV içindeki P etiketi ile olduğunu gördüm. Sorunu çözmesi ama uygun bir çözüm değil bu DİV etiketleri ile P etiketleri yerine eğer.

Son olarak bunu buldum 13**. Bu sorunu P etiketi DİV geçerek çözülmüş anladım ki okuma P () DIV yok ve elemanları arasındaki boşlukları çöken marjları ile. Doldurma için kenar boşluklarını geçiş sorunu çözmek. Ama ben boşlukları çöken davranış, istediğim çöken gevşek.

Açıkçası jQuery ile benim ilk deneyim için pek de iyi olduğunu söyleyebilirim. Ben istiyorsam için en etkili bir WordPress kullanmak için değil kullanmak uygun fonksiyon (slideToggle) ama onun yerine kullanmak biraz el yapımı kod VE şal DİV içinde başka bir DİV VE geçiş boşlukları doldurma, böyle bir şeyi benim düzeni.

Daha basit bir çözüm kaçırdım mı ?

Krdluzni önerdiği gibi, animasyon yöntemi ile özel bir senaryo yazmaya çalıştım. İşte benim kod:

var $div = $('#note_2').parent();
var height = $div.height();

$('#link2').click(
    function () {
        if ( $div.height() > 0 ) {
            $div.animate({ height: 0 }, { duration: 5000 }).css('overflow', 'hidden');
        } else {
            $div.animate({ height : height }, { duration: 5000 });
        }

        return false;
});

Ama bu da bir WordPress kullanmak her zaman animasyonun sonunda görünür taşma ayarlamak için çalışmıyor. DİV animasyonun sonunda reapearing ama içerik, geri kalan kaplanmış.

Ayrıca UI ile çalıştım.Slayt (Ölçek ve Boyut). Çalışıyor ama DİV aşağıda içeriği animasyon ile hareket etmez. Sadece boşluğu doldurmak için animasyonun sonunda/başında sıçrama. Ben bunu istemiyorum.

GÜNCELLEME:

Çözümün bir parçası dinamik bir şeyi daha önce kapsayıcı DİV yüksekliğini ayarlamak için. Bu bir atlama çözmek. Ama çöken farkla bir neden yok. İşte kod:

var parent_div = $("#note_1").parent();
parent_div.css("height", parent_div.height() "px");
parent_div.hide();

İKİNCİ GÜNCELLEME:

Bu sayfadan jQuery kendi sitesinde (Örnek B) hata görebilirsiniz: Tutorials:Live Examples of jQuery

ÜÇÜNCÜ GÜNCELLEME:

JQuery 1.4, artık şansını denemiş :-(

Çözümü div sürgülü piksel cinsinden genişliği ayarlanmalıdır. Kullanmayın '' ne de ''. % oto Ve harika bir sonuç olacak! Şu sorunu kayan bir div içinde satır içi öğeler. Örnek: look here

ama eğer px yükseklik genişlik varsa aynı olacak. Bunu deneyin.