在有规律的时间间隔内逐个跳出文本

Bounce Text one by one in regular interval of time

本文关键字：文本 有规律 时间      更新时间：2023-09-26

我正试图用文本编码一个弹跳效果，使其以规则的间隔一个接一个地弹跳，就像一个字幕。

我试过使用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>

如果更新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;
}
相关文章：