Переключение ДИВ с ослаблением

Question

я получил ссылку, при нажатии этого я хочу дела до slideIn с ослаблением, а затем снова нажмите на ссылку, он должен закрыть DIV, с ослаблением ...

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

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

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

Answer 1

JQuery slideToggle() documentation говорит:

.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 на страницу и использовать one of its 32 easings:

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

You can see a jsFiddle example here

Answer 2

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

Toggle div with different Effects - Jquery Live demo

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

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

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