Question

如何在jquery / JS / css中创建像主页（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。

Answer 2

这是一个解决方案。通过使用jQuery slideUp()和slideDown()来实现。另外，为了让动画每隔几秒运行一次，我使用了标准的javascript setInterval()。

HTML＆amp; 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

Answer 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 / JS / css中的ning主页动画？

3 个答案: