jQuery中无限的时间间隔

Question

我有一个跨度，我为弹跳元素编写了代码，但是我只能设置弹跳的时间间隔，但是如何设置无限/无限弹跳。

的HTML

<div>
    <span class="rect">!!!</span>
</div>

JS

$(document).ready(function(){
    $('.rect').effect("bounce", { times: 3 }, 300);
})

http://jsfiddle.net/RGvjj/164/

Answer 1

在effect()设置成功的回调函数

$(document).ready(function () {
    var cmp = function () {
        $('.rect').effect("bounce", {
            times: 3
        }, 300, cmp);
    }
    cmp();
})

小提琴

Answer 2

您可以通过CSS3无限时间反弹元素

 .bounce { position:fixed; left:50%; bottom:0; margin-top:-25px; margin-left:-25px; height:50px; width:50px; background:red; -webkit-animation:bounce 1s infinite; } @-webkit-keyframes bounce { 0% { bottom:5px; } 25%, 75% { bottom:15px; } 50% { bottom:20px; } 100% {bottom:0;} } 

 <div class="bounce"></div> 

如果您想获得更好的示例，但是它的代码很大，请参见以下代码：

 body { background-color: #DDDDDD; font: 30px sans-serif; height: 350px;} .ball-wrapper { position: fixed; width: 120px; height: 300px; margin-left: -60px; left: 50%; top: 20%; } .ball { position: absolute; width: 120px; height: 120px; border-radius: 70px; background: -webkit-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); background: -moz-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%); box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), inset -2px -1px 40px rgba(0,0,0,0.4), 0 0 1px #000; -webkit-animation: jump 1s infinite; -moz-animation: jump 1s infinite; animation: jump 1s infinite; } .ball::after { content: ""; position: absolute; width: 60px; height: 30px; border-radius: 40px / 20px; left: 30px; top: 10px; background: -webkit-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); background: -moz-linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); background: linear-gradient(top, rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%); } .ball-shadow { position: absolute; left: 50%; bottom: 0; width: 50px; height: 65px; border-radius: 30px / 40px; margin-left: -25px; background: rgba(20, 20, 20, 0.1); box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); -webkit-transform: scaleY(0.3); -moz-transform: scaleY(0.3); transform: scaleY(0.3); -webkit-animation: shrink 1s infinite; -moz-animation: shrink 1s infinite; animation: shrink 1s infinite; } /** * animation */ @-webkit-keyframes jump { 0% { top: 0; -webkit-animation-timing-function: ease-in; } 40% {} 50% { top: 140px; height: 120px; -webkit-animtion-timing-function: ease-out; } 55% { top: 160px; height: 100px; border-radius: 70px/60px; -webkit-animation-timing-function: ease-in; } 65% { top: 110px; height: 120px; border-radius: 50%; -webkit-animation-timing-function: ease-out; } 95% { top: 0; -webkit-animation-timing-function: ease-in; } 100% { top: 0; -webkit-animation-timing-function: ease-in; } } @-moz-keyframes jump { 0% { top: 0; -moz-animation-timing-function: ease-in; } 40% {} 50% { top: 140px; height: 120px; -moz-animtion-timing-function: ease-out; } 55% { top: 160px; height: 100px; border-radius: 70px/60px; -moz-animation-timing-function: ease-in; } 65% { top: 110px; height: 120px; border-radius: 50%; -moz-animation-timing-function: ease-out; } 95% { top: 0; -moz-animation-timing-function: ease-in; } 100% { top: 0; -moz-animation-timing-function: ease-in; } } @-webkit-keyframes shrink { 0% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; -webkit-animation-timing-function: ease-in; } 50% { bottom: 30px; margin-left: -10px; width: 20px; height: 5px; background: rgba(20, 20, 20, .3); box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); border-radius: 20px / 20px; -webkit-animation-timing-function: ease-out; } 100% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; -webkit-animation-timing-function: ease-in; } } @-moz-keyframes shrink { 0% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; -moz-animation-timing-function: ease-in; } 50% { bottom: 30px; margin-left: -10px; width: 20px; height: 5px; background: rgba(20, 20, 20, .3); box-shadow: 0px 0 20px 35px rgba(20,20,20,.3); border-radius: 20px / 20px; -moz-animation-timing-function: ease-out; } 100% { bottom: 0; margin-left: -30px; width: 60px; height: 75px; background: rgba(20, 20, 20, .1); box-shadow: 0px 0 20px 35px rgba(20,20,20,.1); border-radius: 30px / 40px; -moz-animation-timing-function: ease-in; } } 

 <div class="ball-wrapper"> <div class="ball"></div> <div class="ball-shadow"></div> </div>