使用缓动切换div [英] Toggle div with easing

问题描述

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

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

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

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

解决方案

jQuery slideToggle（）文档说：

。 slideToggle（[duration]，[easing]，[callback]） version added：1.4.3 ）

---

持续时间确定动画运行时间的字符串或数字。 strong>一个字符串，指示用于转换的缓动函数。

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

>

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

缓和

截至jQuery 1.4。 3，可以使用命名缓动功能的可选字符串。缓动函数指定动画在不同点处进行动画的速度。 jQuery库中唯一的缓动实现是默认的，名为 swing ，并且以恒定的速度前进，名为 linear 。通过使用插件可以使用更多的缓动函数，特别是 jQuery UI套件。

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

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

<2>包含 jQuery UI ，并使用其32个缓动中的一个：

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

您可以在这里看到一个jsFiddle示例

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 :

.slideToggle( [ duration ], [ easing ], [ callback ] ) (version added: 1.4.3)

---

duration A string or number determining how long the animation will run.

easing A string indicating which easing function to use for the transition.

callback A function to call once the animation is complete.

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

Easing

As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！