首页 > Web开发 > 详细

jquery动画基础

时间:2015-12-09 19:32:51      阅读:217      评论:0      收藏:0      [点我收藏+]
  1. 根据id改变字体大小的动画
    <div class="speech">样式切换</div>
    <div id="switcher">
        <button id="switcher-large">click me</button>
    </div>
    var $speech=$("div.speech");
    var defaultSize=$speech.css("fontSize");
    $("#switcher button").click(function(){
        //alert("123")
        var num=parseFloat($speech.css("fontSize"),10);            
        //alert(num);    //弹出默认字体大小16
        switch(this.id){
            case ‘switcher-large‘:
            num *= 1.4;
            break;
            case ‘switcher-small‘:
            num /= 1.4;
            break;
            default:
            num=parseFloat(defaultSize,10);
            
        }
        $speech.animate({fontSize:num+"px"},"slow")
    })

     

  2. 淡入淡出
  3. $("p").hide();
    $("a").click(function(){
      $("p").animate({
        opacity:‘toggle‘,  //淡入淡出的效果
        height:‘toggle‘    //由上到下的显示效果
        },"slow"); })

jquery动画基础

原文:http://www.cnblogs.com/lixiaoxing/p/5033460.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!