缓动切换div

Question

我有一个链接，当点击它时，我希望一个div使用缓动效果滑入，再次点击链接时，它应该使用缓动效果关闭div…

我已经查看了jQuery缓动插件，但它不适用于jQuery 1.5.1？有什么想法吗，我该怎么做？

现在我只有一个slideToggle函数，它没有缓动效果？

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

- user431619

---

为什么不使用最新的jQuery呢？它不是像1.8.9之类的版本吗？ - Vadiklk

这是1.6.1版本......但我同时使用了一个叫做Parallax的东西，它只能与jQuery 1.5.1及之前的版本一起使用。 - user431619

啊，不，现在我正在使用1.6.1版本...但仍然没有解决上述问题 :) - user431619

什么在缓动插件中不起作用，我已经检查过了，应该能够工作。 - Vadiklk

虽然有点老，但我想快速提一下 jQuery 现在有一个迁移文件，可以帮助使用最新版本的 jQuery 与不再受支持的旧代码兼容：http://blog.jquery.com/2013/05/08/jquery-migrate-1-2-1-released/ - darcher

Answer 1

根据jQuery slideToggle() 的文档，它的参数如下：

.slideToggle( [ duration ], [ easing ], [ callback ] )（版本添加：1.4.3）

---

duration 字符串或数字，用于定义动画运行时间。

easing 字符串类型，指定在过渡中使用的缓动函数。

callback 动画完成后要调用的函数。

可以看到，这里有一个叫做 [easing] 的参数，其描述如下：

Easing

自 jQuery 1.4.3 起，可选字符串类型的参数用于指定缓动函数名称。缓动函数指定了动画在不同点上进行的速度。jQuery 库中唯一的缓动实现是默认的 swing 和以恒定速度进行的 linear。使用插件可以获得更多的缓动函数，尤其是 jQuery UI 套件提供了众多缓动函数。

所以你有两个选择：

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示例

- Sylvain

---

如果您不使用jQuery UI的其他部分，可以在http://jqueryui.com/download上选择仅选择“Effects Core”进行自定义构建。 - DarthJDG

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>

- Barath Kumar