动画效果显示文字标题

hina1115

1. 
   
2.         <div class="container">
   
3.                 <div class="row">
   
4.                         <div class="col-lg-12">
   
5.                                 <div class="jumbotron">
   
6.                                         <h1><span>Hello</span> <span>World</span></h1>
   
7.                                         <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
   
8.                                         <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
   
9.                                 </div>
   
10.                         </div>
    
11.                 </div>
    
12.         </div>

复制代码

1. 
   
2.         <script>
   
3.         $(function() {
   
4.                 $('span').hide();
   
5.                 $('p').hide();
   
6. 
   
7.                 animate_show('span:eq(0)', 'slideInLeft');
   
8.                 animate_delay('span:eq(0)', 'span:eq(1)', 'slideInRight');
   
9.                 animate_delay('span:eq(1)', 'p:eq(0)', 'fadeInUp');
   
10.                 animate_delay('p:eq(0)', 'p:eq(1)', 'rotateIn');
    
11. 
    
12.                 /**
    
13.                  * 使用一个效果来显示一个元素
    
14.                  * @param  {string} element 元素
    
15.                  * @param  {string} animate animate.css的效果
    
16.                  * @return {void}         
    
17.                  */
    
18.                 function animate_show(element, animate) {
    
19.                         $(element).show().addClass('animated ' + animate);
    
20.                 }
    
21. 
    
22.                 /**
    
23.                  * 顺序显示第二个元素的效果
    
24.                  * @param  {string} element1 等待结束的元素
    
25.                  * @param  {string} element2 接下来要显示的元素
    
26.                  * @param  {string} animate  animate.css的效果
    
27.                  * @return {void}         
    
28.                  */
    
29.                 function animate_delay(element1, element2, animate) {
    
30.                         $(element1).one('webkitAnimationEnd mozAnimationEnd oAnimationEnd animationEnd', function() {
    
31.                                 animate_show(element2, animate);
    
32.                         });
    
33.                 }
    
34.         });
    
35.         </script>

复制代码

naturally

你这是jquery吗？不用引用库文件吗？

hina1115

naturally 发表于 2013-12-17 21:05
你这是jquery吗？不用引用库文件吗？

当然是jquery和animate.css