Jquery 轻松切换div

我有一个链接，当点击这个我想一个div滑动与放松，然后再次点击链接，它应该关闭div，与放松

我看过jQueryEasing插件，但它不适用于jQuery1.5.1？我能做什么，怎么做

现在我只得到了一个slideToggle函数，它没有缓和

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

jQuery说：

.slideToggle[持续时间]，[放松]，[回拨]新增版本：1.4.3

持续时间确定动画将运行多长时间的字符串或数字

缓和一个字符串，指示用于转换的缓和函数

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

如您所见，有一个名为[easing]的参数，其描述如下：

缓和

从jQuery1.4.3开始，可以使用一个可选的字符串来命名放松函数。缓和功能指定动画在动画中不同点的进展速度。jQuery库中唯一的实现是默认的，称为swing，以及一个以恒定速度进行的，称为linear的实现。插件的使用提供了更多的简化功能，最显著的是jQueryUI套件

所以你有两个选择：

1您可以使用一种可用的方法：

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

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>

---

为什么不使用最新的jquery呢。是不是像1.8.9之类的？是1.6.1。。。。但是我也使用了一种叫做视差的东西，它只适用于jQuery1.5.1和之前的版本，不，现在我使用的是1.6.1。。。但是仍然不能解决上面的问题：什么东西在easing插件中不起作用，检查它，它应该起作用。slideToggle支持easing。从jQuery文档：.slideToggle[duration]、[easing]、[callback]如果您不使用jQuery UI的其他部分，您可以通过仅选择Effects核心在上进行自定义构建。

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