我知道还有其他更喜欢的方法,但我想给一个div img使用jQuery的反弹效果。使jQuery的动画循环
我试图环
$('#downarrow').animate({bottom:'4px'});
$('#downarrow').animate({bottom:'0px'});
任何帮助将是真棒。谢谢!
我知道还有其他更喜欢的方法,但我想给一个div img使用jQuery的反弹效果。使jQuery的动画循环
我试图环
$('#downarrow').animate({bottom:'4px'});
$('#downarrow').animate({bottom:'0px'});
任何帮助将是真棒。谢谢!
一个非常简单的解决办法:
function bounceUp(){
$('#downarrow').animate({bottom:'4px'}, 1000, bounceDown);
}
function bounceDown(){
$('#downarrow').animate({bottom:'0px'}, 1000, bounceUp);
}
bounceUp();
正是我需要的。我会在8分钟内接受这个!谢谢! – kenny
您可以使用jQuery addClass
或toggleClass
。但是这种方法使用了css动画。
$(document).ready(function() {
$('.arrow').toggleClass('upp');
});
.arrow {
position: relative;
bottom: 0px;
}
.upp {
-webkit-animation: mymove 1.5s infinite;
/* Chrome, Safari, Opera */
animation: mymove 1.5s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
0% {
bottom: 10px;
}
50% {
bottom: 0px;
}
100% {
bottom: 10px
}
}
@keyframes mymove {
0% {
bottom: 10px;
}
50% {
bottom: 0px;
}
100% {
bottom: 10px
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="arrow">
hey
</div>
难道不这样更容易在CSS关键帧动画? –