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;
}

在规则的时间间隔内逐个弹跳文本

1 个答案: