我无法找到一个使用jQuery动画让一个div反弹的解决方案。类似以下代码是不起作用的:
$("#bounce").click(function() {
$(this).effect("bounce", {
times: 3
}, 300);
});.
我希望不使用jQuery UI或任何外部插件,例如缓动插件。在我的情况下,摆动效果也很好,所以两种方法都可以。
这里有一个示例,非常感谢任何帮助!提前致谢。
我无法找到一个使用jQuery动画让一个div反弹的解决方案。类似以下代码是不起作用的:
$("#bounce").click(function() {
$(this).effect("bounce", {
times: 3
}, 300);
});.
我希望不使用jQuery UI或任何外部插件,例如缓动插件。在我的情况下,摆动效果也很好,所以两种方法都可以。
这里有一个示例,非常感谢任何帮助!提前致谢。
您可以在元素上简单地链式调用一些 animate
方法,如下所示:
$("#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);
}
}
var getAttention = function(elementClass,initialDistance, times, damping) {
for(var i=1; i<=times; i++){
var an = Math.pow(-1,i)*initialDistance/(i*damping);
$('.'+elementClass).animate({'top':an},100);
}
$('.'+elementClass).animate({'top':0},100);
}
$( "#bounce").click(function() {
getAttention("bounce", 50, 10, 1.2);
});
#bounce {
height:50px;
width:50px;
background:#f00;
margin-top:50px;
position:relative;
border-radius: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bounce" class="bounce"></div>
如果您想要实现垂直弹跳,可以尝试以下方法:
function bounce(element, distance, speed){
var bounce_margin_top = $(element).css("margin-top")
$(element).css("margin-top", "-="+distance)
$(element).show().fadeIn(200).animate({
"margin-top": bounce_margin_top
}, {
duration: speed,
easing: "easeOutBounce"
})
}
easeOutBounce
需要 jQuery Ui。 - Sparkup$('#elementToBounce').shake({direction: up, distance:10, speed: 75, times: 3})
结合不同的答案,这是我在点击后所使用的方法
let el = $('.bounce-me');
for (var i = 1; i <= 2; i++) {
el.animate({ 'margin-top': 15 }, 'fast').animate(
{ 'margin-top': -15 },
'fast'
);
}
el.animate({ 'margin-top': 0 }, 'fast');
<div id="bounce"></div>
CSS样式表:
#bounce {
height:50px;
width:50px;
background:#333;
margin-top:50px;
position:relative;
}
最后,jQuery:
$( "#bounce" ).click(function() {
for (var i=1; i<=3; i++) {
$(this).animate({top: 30},"slow");
$(this).animate({top: 0},"slow");
}
});
这里有一个可用的 fiddle:http://jsfiddle.net/5xz29fet/1/