Блог

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

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

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

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

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

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

---

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

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

обратный вызов функции, вызываемой после завершения анимации.

Как вы можете видеть, есть параметр с именем [ 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 здесь

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

Я пробовал, все работает нормально.

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