jQuery 使用缓动切换 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6121255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle div with easing
提问by Sylvain
I've got a link, when clicking this I want a div to slideIn with easing, and then clicking the link again, it should close the div, with easing...
我有一个链接，单击此链接时，我想要一个 div 以缓动滑入，然后再次单击该链接，它应该关闭 div，缓动...
I've looked at jQuery easing plugin, but it doesn't work with jQuery 1.5.1? Any ideas to what I can do, and how?
我看过 jQuery 缓动插件，但它不适用于 jQuery 1.5.1？关于我能做什么以及如何做的任何想法？
Right now I only got a slideToggle function, which doesn't have easing?
现在我只有一个slideToggle 函数，它没有缓动？
$('.open-mypage').click(function () {
$('#mypage-info').slideToggle('2000', function () {
// Animation complete.
});
});
回答by Sylvain
jQuery slideToggle() documentationsays :
jQuery slideToggle() 文档说：
.slideToggle( [ duration ], [ easing ], [ callback ] )(version added: 1.4.3)
durationA string or number determining how long the animation will run.
easingA string indicating which easing function to use for the transition.
callbackA function to call once the animation is complete.
.slideToggle( [持续时间], [缓动], [回调])(版本添加: 1.4.3)
持续时间确定动画将运行多长时间的字符串或数字。
easing一个字符串，指示用于过渡的缓动函数。
callback动画完成后要调用的函数。
As you can see, there's a parameter called [ easing ], its description is :
如您所见，有一个名为 的参数[ easing ]，其描述为：
Easing
As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called
swing, and one that progresses at a constant pace, calledlinear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.
宽松
从 jQuery 1.4.3 开始，可以使用命名缓动函数的可选字符串。缓动函数指定动画在动画中不同点的速度。jQuery 库中唯一的缓动实现是默认的，称为
swing，和一个以恒定速度推进的，称为linear。通过使用插件，可以使用更多缓动功能，最显着的是jQuery UI 套件。
So you have 2 choices :
所以你有两个选择：
1) You use one the available easing :
1）您使用一种可用的缓动：
$('.open-mypage').click(function () {
$('#mypage-info').slideToggle('2000', "swing / linear", function () {
// Animation complete.
});
});
2) You include jQuery UIin your page and use one of its 32 easings:
2) 您在页面中包含jQuery UI并使用其 32 个缓动之一：
$('.open-mypage').click(function () {
$('#mypage-info').slideToggle('2000', "easeOutBounce", function () {
// Animation complete.
});
});
回答by Bharath Kumaar
I have got a link, Here's an example for different types of toggle Effects.
我有一个链接，这是不同类型切换效果的示例。
Toggle div with different Effects - Jquery Live demo
使用不同的效果切换 div - Jquery Live 演示
Select the effect type from the drop down and when click,this makes a toggle effects that looks a lot better.
从下拉列表中选择效果类型，点击后，切换效果看起来好多了。
I have tried, It working fine.
我试过了，效果很好。
$(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>
