javascript - 以固定的时间间隔一个一个地弹跳文本

Question

我正在尝试用文本编写弹跳效果，使其像选框一样定期弹跳。

我已经尝试过使用 jquery，但没有让它一一反弹。

这是我的FIDDLE。

js：

$(document).ready(function(){
    $(".test").effect( "bounce", 
              {times:4}, 500 );

});

HTML：

<div class="test">
    <p>First Time Bounce</p>
    <p>This Bounce to nxt(After First)</p>

    .
    .
    .
    <p>Last Bounce Then return To First One</p>
</div>

Answer 1

如果您更新 HTML 以在每个字母周围添加某种类型的包装元素，则可以依次为每个字母设置动画。然后你只需要遍历这些字母并一次一个地为它们设置动画。

$(document).ready(function(){

    //setup a counter to keep our place and cache a selection to the letter wrappers
    var counter = 0,
        $chars  = $(".test").children();

    //setup an interval to animate a letter every so often
    setInterval(function () {

        //select the current letter wrapper and animate it
        $chars.eq(counter).effect( "bounce", {times:1}, 500 );

        //increment the counter so we animate the next letter next time around
        counter++;

        //check if the counter still relates to an index of the $chars collection
        if (counter >= $chars.length) {
            counter = 0;
        }
    }, 250);

});

这假设 HTML 结构如下：

<div class="test">
    <span>s</span>
    <span>o</span>
    <span>m</span>
    <span>e</span> 
    <span>t</span>
    <span>e</span>
    <span>x</span>
    <span>t</span>
</div>

这是一个演示：http: //jsfiddle.net/jb9mt/6/

请注意，当使用bounce效果 ( ui-effects-wrapper) 显示内联时，我必须更新添加到 HTML 结构中的 jQueryUI 包装器元素的 CSS：

.ui-effects-wrapper {
    display : inline-block;
}