`
pengyaouhyy
  • 浏览: 25016 次
  • 性别: Icon_minigender_1
  • 来自: 成都
文章分类
社区版块
存档分类
最新评论

Jq文字动态特效实现

阅读更多

利用JqAnimate实现的文字特效效果(大小,位置,透明度等变换)。

 

var WordDemoHandler={
     DemoOne:function(){
         var mMarginLeft=100;
         for(var i=0;i<$("#demoOne").children().length;i++){
             var target=$($("#demoOne").children()[i]);
             target.animate({marginLeft:mMarginLeft+"px",opacity:1},100+i*100);
              mMarginLeft+=target.width();
         }
     },
     DemoTwo:function(){
         $("#demoTwo>span").animate({marginTop:0+"px",fontSize:35+"px",opacity:1,marginLeft:100+"px"},500);
     },
     DemoThree:function(){
          var mMarginLeft=100;
          for(var i=0;i<$("#demoThree").children().length;i++){
             var target=$($("#demoThree").children()[i]);
             target.animate({marginLeft:mMarginLeft+"px",opacity:1},100+i*100);
              mMarginLeft+=target.width();
              target.animate({fontSize:85+"px"},300,function(){$(this).animate({fontSize:35+"px"},300);});
         }
     }
 }

 演示以及原文:http://www.pengyaou.com/LegendsZ/File/2014/10/21/20141021173454484.html

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics