通过缓动切换 div

Question

我有一个链接，当单击此链接时，我想要一个 div 通过缓动滑入，然后再次单击该链接，它应该通过缓动关闭 div...

我看过 jQuery 缓动插件，但它没有不能与 jQuery 1.5.1 一起使用吗？对我能做什么以及如何做有什么想法吗？

现在我只有一个 SlideToggle 函数，它没有缓动功能？

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

Answer 1

jQuery slideToggle() 文档 说：

.slideToggle( [ 持续时间 ], [ 缓动 ], [ 回调 ] ) （添加版本：1.4.3）

<小时>

duration 确定动画运行时间的字符串或数字。

easing 一个字符串，指示用于过渡的缓动函数。

回调动画完成后调用的函数。

正如你所看到的，有一个名为[ easing ]的参数，它的描述是：

宽松

从 jQuery 1.4.3 开始，可以使用命名缓动函数的可选字符串。缓动函数指定动画中不同点的动画进展速度。 jQuery 库中唯一的缓动实现是默认实现，称为“swing”，以及以恒定速度进行的实现，称为“线性”。使用插件可以提供更多缓动功能，最著名的是 jQuery UI 套件。

因此，您有 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 示例

Answer 2

从下拉列表中选择效果类型，单击时，这会使切换效果看起来更好。

我试过了，效果很好。

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