javascript - jquery/JS/css 中的 ning 主页动画？

Question

如何在 jquery/JS/css 中创建类似于 ning 主页 ( http://www.ning.com/ ) 的动画效果？我说的是文本“建立和培养你自己的追随者/粉丝/成员/客户等社区”的窗帘动画。它是一个带有“word”类的 span 元素

Answer 1

您可以创建一个 array然后用 setInterval 遍历数组索引并使用 jQuery slideUp - slideDown用于动画。

html:

<p>Build and cultivate your own community of</p>
<div id="word">customers</div>

脚本:

var words = ['followers', 'fans', 'members', 'customers'];
var index = 0;//start with 0, first array index is 0
var $word = $('#word');

setInterval(function () {  
    if (index == words.length) {
        //if current index is equal to the arrays length reset it to 0
        index = 0;
    }
    //slideUp to hide
    $word.slideUp(500, function () {
     //on animation complete hidden change the text then slideDown to show
        $word.text(words[index]).slideDown(500);
        /*
        It's always a good practice to separate increment/decrement 
        in a single line, as it might confuse some(especially new) programmers
        */
        index++;
    });   
}, 2000);

查看此 jsfiddle .

您可以使用 <span>但它会产生不同的效果，因为 <span>是一个内联元素(检查jsfiddle)。您需要将其设置为 display:block达到预期效果- jsfiddle demo .