使用缓动切换div

问题描述

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

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

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

  $（'。open-mypage'）。click（function（）{
 $（'＃mypage- info'）。slideToggle（'2000'，function（）{
 //动画完成。
}）; 
}）; 
  

解决方案

jQuery 说：

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

所以你有两个选择：
$ b $ 1您可以使用一个可用的缓动：

$ $ p $ $ $ （）函数（）{code> $（'。open-mypage'）。click（function（）{
$（'＃mypage-info'）。slideToggle（'2000'，swing / linear，function
//动画完成
}）;
}）;

包含，并使用：

  $（'。open-mypage'）。click（function（）{
 $（'＃mypage-info '）.slideToggle（'2000'，easeOutBounce，function（）{
 //动画完成。
}）; 
}）; 
  

I've got a link, when clicking this I want a div to slideIn with easing, and then clicking the link again, it should close the div, with easing...

I've looked at jQuery easing plugin, but it doesn't work with jQuery 1.5.1? Any ideas to what I can do, and how?

Right now I only got a slideToggle function, which doesn't have easing?

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

解决方案

jQuery slideToggle() documentation says :

As you can see, there's a parameter called [ easing ], its description is :

So you have 2 choices :

1) You use one the available easing :

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

2) You include jQuery UI in your page and use one of its 32 easings :

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

You can see a jsFiddle example here

这篇关于使用缓动切换div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！