it-roy-ru.com

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

У меня есть ссылка, при нажатии на которую я хочу, чтобы div для slideIn с помощью easing, а затем, щелкнув ссылку еще раз, он должен закрыть DIV с помощью easing ...

Я смотрел на плагин JQuery ослабление, но он не работает с JQuery 1.5.1? Есть идеи, что я могу сделать и как? 

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

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

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 здесь

30
Sylvain

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

Переключить div с различными эффектами - Jquery Live демо

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

Я пытался, это работает нормально.

$(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>
0
Bharath Kumaar