Переключить div с ослаблением - PullRequest
Новая
       9

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

12 голосов
/ 25 мая 2011

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

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

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

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

Ответы [ 2 ]

32 голосов
/ 25 мая 2011

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

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

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

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

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

0 голосов
/ 29 апреля 2015

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

Переключение 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>
...