Question

我有一个链接，当点击这个我想要一个div来滑动缓动，然后再次点击链接，它应该关闭div，并缓和...

我看过jQuery easing插件，但它不适用于jQuery 1.5.1？对我能做什么以及如何做的任何想法？

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

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

Answer 1

jQuery slideToggle() documentation说：

.slideToggle（[duration]，[easing]，[callback]）（版本添加：1.4.3 ）


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

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

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

如您所见，有一个名为[ 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并使用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>

用缓动切换div

2 个答案: