Переключить div с ослаблением

У меня есть ссылка, когда я нажимаю на нее, я хочу, чтобы div со слайдом с уменьшением, а затем снова нажав ссылку, он должен закрыть div, с ослаблением...

Я посмотрел плагин jQuery easing, но он не работает с jQuery 1.5.1? Любые идеи, что я могу сделать, и как?

Сейчас у меня есть функция slideToggle, которая не имеет ослабления?

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

Ответ 1

jQuery документация slideToggle():

.slideToggle([продолжительность], [ослабление], [обратный вызов]) (добавлена версия 1.4.3)

duration Строка или номер, определяющий продолжительность выполнения анимации.

easing Строка, указывающая, какую функцию ослабления использовать для перехода.

callback Функция для вызова после завершения анимации.

Как вы можете видеть, существует параметр с именем [ easing ], его описание:

Облегчение

Как и в jQuery 1.4.3, может использоваться необязательная строка, обозначающая функцию ослабления. Функции ускорения определяют скорость, с которой анимация развивается в разных точках анимации. Единственными облегчающими реализациями в библиотеке jQuery являются значения по умолчанию, называемые swing, и один, который продвигается с постоянной скоростью, называется linear. Доступны более легкие функции с использованием плагинов, в первую очередь jQuery UI suite.

Итак, у вас есть 2 варианта:

1) Вы используете одно доступное ослабление:

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

2) Вы включаете jQuery UI на свою страницу и используйте один из его 32 облегчения:

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

Здесь вы можете увидеть пример jsFiddle

Ответ 2

У меня есть ссылка, Вот пример для разных типов эффектов переключения.

Переключить div с различными эффектами - JQuery Демо-версия

Выберите тип эффекта из раскрывающегося списка и, щелкнув мышью, это сделает эффекты переключения, которые выглядят намного лучше.

Я пробовал, он отлично работает.

$(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>