эффект переключения jquery

Question

Я новичок в jquery и пытаюсь создать эффект выпадающего меню, но я хочу снова нажать на div, чтобы он снова скользнул вверх :) Как я могу это сделать?

<script type="text/javascript">
    $(function() {
        $('#panel').click(function() {
            $(this).animate({
                'height' : '500px'
            },1000);
            $('#demo').fadeIn(500);
        });
    });
</script>

<div id="panel">Hej med dig</div>

Answer 1

Я думаю:

$('#panel').click(
    function(){
        $(this).slideToggle(1000);
        $('#demo').fadeToggle(500);
    });

это то, что вы ищете.

Ссылки:

1. slideToggle()
2. fadeToggle().

<час /> Отредактировано

Учитывая, что ваша наценка, по сути:

<div id="panel">Hej med dig
    <div id="demo">Jeg er demo</div>    
</div>

Следующий jQuery, вероятно, должен работать более правильно:

$('#panel').click(
    function(){
        $('#demo').slideToggle(500);
    });

JS Fiddle demo .

Answer 2

Вы можете проверить это в моей демонстрации. Я беру начальное значение высоты панели и использую условие, чтобы определить какую высоту я использую для анимации.

    $panel= $('#panel');
    init_height= $panel.css('height'); // grab initial value of height when DOM is ready
    $('#panel').click(function() {
        cur_height= $(this).css('height');
        (cur_height == '500px') ? height= init_height : height= '500px'; // conditional statement to define height for animate method;

        $(this).animate({
            'height' : height
        },1000);
        $('#demo').fadeIn(500);
    });

Надеюсь, это поможет вам

DEMO

Answer 3

Для этого вам понадобится обернуть всю функцию слайда в функцию JQuery, готовую к DOM, и использовать метод noConflict. Это гарантирует, что слайд вверх и вниз не будет действовать до тех пор, пока не будет загружен весь документ, и отсутствие конфликта гарантирует, что он не будет конфликтовать с любыми другими библиотеками JS или пользовательскими сценариями, которые у вас могут быть.

var $i = jQuery.noConflict();
$i(document).ready(function() {
  $i('#panel').click(function() {
    $i('#demo').slideToggle('slow');
  });
});

Обратите внимание, что функция переключения слайдов в jQuery 1.4.3 имеет несколько дополнительных аргументов, которые можно передавать.

.slideToggle( [ duration ], [ easing ], [ callback ] )
**duration** - string or number determining how long the animation will run.
**easing** - string indicating which easing function to use for the transition.
**callback** - function to call once the animation is complete.

Вы можете узнать больше о slideToggle (); и посмотрите реальные примеры здесь:

jQuery .slideToggle ();