Przegubowe div z złagodzenie

Question

mam link, po kliknięciu tego chcę div slideIn z złagodzenie, a następnie ponowne kliknięcie w link, należy go zamknąć div z złagodzenie ...

I ve spojrzał na wtyczkę jQuery easing, ale nie działa z jQuery 1.5.1? Wszelkie pomysły na to, co mogę zrobić i jak?

W tej chwili mam tylko funkcję SlideToggle, która nie ma wygładzania?

$('.open-mypage').click(function() { 
    $('#mypage-info').slideToggle('2000', function() { 
     // Animation complete. 
    }); 
}); 

Answer 1

jQuery slideToggle() documentation mówi:

.slideToggle ([czas], [złagodzenie] [zwrotna]) (wersja dodaje: 1.4.3)

---

czas trwania Ciąg lub liczba określająca czas trwania animacji.

wygładzanie Ciąg znaków wskazujący, którą funkcję wygładzania należy użyć do przejścia.

callback Funkcja do wywołania po zakończeniu animacji.

Jak widać, jest to parametr zwany [ easing ], jego opis jest:

Złagodzenie

Jak jQuery 1.4.3, opcjonalny ciąg nazewnictwa funkcji zmiany dynamiki może być używany. Funkcje wygładzania określają szybkość, z jaką animacja rozwija się w różnych punktach animacji. Jedynymi implementacjami ułatwiającymi udostępnianie w bibliotece jQuery są ustawienia domyślne o nazwie swing i takie, które rozwijają się w stałym tempie, o nazwie linear. Więcej funkcji rozluźniających można uzyskać za pomocą wtyczek, przede wszystkim z zestawu jQuery UI .

Więc masz 2 możliwości:

1) użyć jednej z dostępnych złagodzenie:

$('.open-mypage').click(function() { 
    $('#mypage-info').slideToggle('2000', "swing/linear", function() { 
     // Animation complete. 
    }); 
}); 

2) dołączyć jQuery UI w swojej strony i skorzystać one of its 32 easings:

$('.open-mypage').click(function() { 
    $('#mypage-info').slideToggle('2000', "easeOutBounce", function() { 
     // Animation complete. 
    }); 
}); 

You can see a jsFiddle example here

Answer 2

Mam link, Oto przykład dla różnych typów przełączania efektów.

Toggle div with different Effects - Jquery Live demo

Wybierz typ efektu z rozwijanego i gdy kliknięcie, to sprawia, że ​​efekty zatrzaskowych, że wygląda o wiele lepiej.

Próbowałem, działa dobrze.

$(function() { 
    var index = 0; 
    $("#btnChangeEffect").click(function() { 
     var effectType = $("#effectTypes").val(); 
     $("#dvContent").toggle(effectType, 600); 
    }); 
}); 



<select name="effects" id="effectTypes" class="ddl"> 
    <option value="blind">Blind</option> 
    <option value="bounce">Bounce</option> 
    <option value="clip">Clip</option> 
    <option value="drop">Drop</option> 
    <option value="explode">Explode</option> 
    <option value="fold">Fold</option> 
    <option value="highlight">Highlight</option> 
    <option value="puff">Puff</option> 
    <option value="pulsate">Pulsate</option> 
    <option value="scale">Scale</option> 
    <option value="shake">Shake</option> 
    <option value="size">Size</option> 
    <option value="slide">Slide</option> 
</select>