用缓动切换div

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()文档说:

.slideToggle([duration],[easing],[callback])(版本增加:1.4.3)

duration(确定持续时间)确定动画运行时间的字符串或数字.

easing一个字符串,指示要用于转换的缓动函数.

callback动画完成后调用的函数.

如您所见,有一个名为的参数[ 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示例