jquery/JS/css 中的 ning 主页之类的动画？答案

【问题标题】：animation like ning home page in jquery/JS/css?jquery/JS/css 中的 ning 主页之类的动画？
【发布时间】：2013-12-19 17:19:42
【问题描述】：

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

【问题讨论】：

标签： javascript jquery css animation effect

【解决方案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。

【讨论】：

还有一件事，滑动文本下方的段落
不会在ning.com网站上滑动，我想要那个，怎么做？
在 ning.com 网站上，请注意，他们将 <span> 与具有修复 height - <div style="height:36px;"><span id="word">customers</span></div> 的 <div> 包装在一起。这是jsfiddle。

【解决方案2】：

这里有一个解决方案。通过使用 jQuery slideUp() 和 slideDown() 成为可能。此外，为了让动画每隔几秒运行一次，我使用了标准的 javascript setInterval()。

HTML & JS

<!DOCTYPE html>
<html>

  <head>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  </head>

  <body>
    <h1>Build something...</h1>
    <h1 id="marqueeText">Testing</h1>

    <button id="foo">Foo</button>
    <script>
      $(document).ready(function() {

        // Drumroll, the main function that will start the rolling text.
        var drumrollPlease = function() {
          var index = 0;
          var words = ['Awesome', 'Fun', 'Amazing'];
          var marquee = $('#marqueeText');

          // Key part here.  This is the heart of the script, where your words will get rotated through,
          // animating with slideup/slidedown and changing out your words based on the above words array.
          window.setInterval(function () {
            // Reset to the beginning once we reach end of our words list.
            if (index >= words.length) {
              index = 0;
            }
            // Set the marquee container to slide, update the word in our marquee container and then slide back down to reveal 
            // the new word.
            marquee.slideUp('slow', function() {
              marquee.html(words[index++]);
              marquee.slideDown();
            });
          }, 2000); // Modify this duration in milliseconds as you please.
        }

        // I bound my button foo to illustrate how to trigger it.  I could
        // just as easily have called drumrollPlease() to have the function auto run 
        // when the document was in the ready state.
        $('#foo').click(function() {
          drumrollPlease();
        });
      });
    </script>
  </body>

</html>

查看按钮激活的 plunker 版本：HERE

查看自动激活plunker版本：HERE

【讨论】：

【解决方案3】：

您可以使用TweenlitMax

包括

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/plugins/TextPlugin.min.js"></script>

HTML

<div>Build and cultivate your own community of</div>
<div id="compatibility">Followers</div>

CSS：

#compatibility{
    width:200px; 
    font-size:20px;
    height:100px;
    display:inline-block;
    overflow:hidden;
    position:absolute;
    font-weight:bold;
}

JS：

$(document).ready(function(){
    var tl = new TimelineLite({onComplete:onAnimationComplete});
    text = $("#compatibility");
    tl.fromTo(text,1,{height:0},{height:100})
      .fromTo(text,1,{height:100},{height:0})
      .set(text,{text:"fans"})
      .fromTo(text,1,{height:0},{height:100})
      .fromTo(text,1,{height:100},{height:0})
      .set(text,{text:"members"})
      .fromTo(text,1,{height:0},{height:100})
      .fromTo(text,1,{height:100},{height:0});
    function onAnimationComplete(){
        tl.restart();
    }
});

查看Fiddle

【讨论】：

答案是正确的，谢谢。但我不需要使用我熟悉的 JQuery，但我也会尝试 tweenmax，thanx 的建议