Próbowałem wsuwać i wysuwać DIV za pomocą funkcji przełączania jQuery, ale wynik jest zawsze gwałtowny na początku i / lub końcu animacji. Oto kod js, którego używam:

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

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

Możesz również zobaczyć pełny przykład tutaj:Test jQuery Slide

Zwykle używam Mootools i mogę zrobić ten slajd bez żadnych problemów. Ale zaczynam nowy projekt w Django, a większość aplikacji w Django używa jQuery. Tak więc i po przeczytaniu tegojQuery vs Mootools Postanowiłem, że będzie to dobra okazja do rozpoczęcia korzystania z jQuery. Więc moją pierwszą potrzebą było przesunięcie tego DIV. I to nie działa poprawnie.

Zrobiłem więcej wyszukiwania i odkryłem, że jest to stary błąd w jQuery z marginesem i dopełnieniem zastosowanym w DIV. Rozwiązaniem jest owinięcie DIV w innym DIV. To nie naprawiło rzeczy w moim przypadku.

Szukając dalej znalazłem ten postSkoczna animacja jumprevisited. Naprawia skok na jednym końcu, ale nie na drugim (Test2 wTest jQuery Slide).

Na przepełnieniu stosu znalazłem tojQuery IE jerky animacja slajdów. W komentarzach widziałem, że problem dotyczy tagu P wewnątrz DIV. Jeśli zastąpię tagi P tagami DIV, które naprawią problem, ale to nie jest właściwe rozwiązanie.

Wreszcie znalazłem toDziwny slajd zachowania jQuery. Czytając to zrozumiałem, że problem rozwiązano przez przełączenie ze znacznika P na DIV z marginesami P (nieobecnymi w DIV) i zwijaniem marginesów między elementami. Jeśli więc przestawię marginesy na pola, naprawi to problem. Ale tracę zapadające się zachowanie marginesów, które zapadam.

Szczerze mówiąc, mogę powiedzieć, że moje pierwsze doświadczenie z jQuery nie jest naprawdę dobre. Jeśli chcę użyć jednego z najprostszych efektów w jQuery, nie muszę używać odpowiedniej funkcji (slideToggle), ale zamiast tego użyj jakiegoś ręcznie napisanego kodu I zawiń DIV w inny DIV I przełącz marginesy na paddings, zakłócając mój układ.

Czy tęskniłem za prostszym rozwiązaniem?

Jak sugeruje krdluzni, próbowałem pisać jako skrypt niestandardowy za pomocą metody animacji. Oto mój 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;
});

Ale to też nie działa, ponieważ jQuery zawsze ustawia przepełnienie tak, aby było widoczne na końcu animacji. Tak więc DIV powraca na końcu animacji, ale nakłada się na resztę zawartości.

Próbowałem także z UI.Slide (i skalą i rozmiarem). Działa, ale zawartość poniżej DIV nie porusza się wraz z animacją. Przeskakuje tylko na końcu / początku animacji, aby wypełnić lukę. Nie chcę tego.

AKTUALIZACJA:

Jedną z części rozwiązania jest dynamiczne ustawienie wysokości kontenera DIV przed wszystkim. To rozwiązuje jedno skakanie. Ale nie jedna przyczyna polega na zawaleniu się marginesu. Oto kod:

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

DRUGA AKTUALIZACJA:

Możesz zobaczyć błąd na stronie jQuery na tej stronie (przykład B):Tutoriale: Live Przykłady jQuery

TRZECIA AKTUALIZACJA:

Próbowałem z jQuery 1.4, bez szans :-(