点击jQuery弹跳效果没有jQuery UI [英] jQuery Bounce Effect on click no jQuery UI

问题描述

我找不到一个动画的解决方案来使div弹跳，只使用jQuery动画。类似的东西不起作用：

  $（＃bounce）。click（function（）{
 $（这个）.effect（bounce，{
 times：3 
}，300）; 
}）;。
  

我宁愿不使用jQuery UI或任何外部插件，例如缓动的插件。在我的情况下摆动效果会一样好，所以两者都可以。

这是示例，任何帮助将不胜感激！在此先感谢您可以简单地链接一些 animate 调用像这样的元素：

  $（＃bounce）。click（function（）{
 doBounce（$ （this），3，'10px'，300）; 
}）; 
 
 
函数doBounce（element，times，distance，speed）{
 for（var i = 0; i< times; i ++）{
 element.animate （{marginTop：' -  ='+ distance}，speed）
 .animate（{marginTop：'+ ='+ distance}，speed）; 
 
 
 code 
 $ b 
工作示例：http://jsfiddle.net/Willyham/AY5aL/  
 
I cannot find a solution to an animation to make a div bounce, using just jQuery animations. Something like does not work:
$("#bounce").click(function() {
    $(this).effect("bounce", {
        times: 3
    }, 300);
});.​
I would prefer not to use jQuery UI or any external plugin, such as the easing one. A wobble effect would be just as good in my case, so either will do.

Here is an example, any help would be much appreciated! Thanks in advance
解决方案
You could simply chain together some animate calls on the element like so:
$("#bounce").click(function() {
    doBounce($(this), 3, '10px', 300);   
});


function doBounce(element, times, distance, speed) {
    for(var i = 0; i < times; i++) {
        element.animate({marginTop: '-='+distance}, speed)
            .animate({marginTop: '+='+distance}, speed);
    }        
}
Working example: http://jsfiddle.net/Willyham/AY5aL/

                        
这篇关于点击jQuery弹跳效果没有jQuery UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！