jQuery自定义动画

最新推荐文章于 2020-05-25 12:18:30 发布

greatverve

最新推荐文章于 2020-05-25 12:18:30 发布

阅读量813

点赞数

分类专栏： JS.JQuery 文章标签： jquery function go c

本文链接：https://blog.csdn.net/greatverve/article/details/3595776

版权

JS.JQuery 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

此文不好，参考：

http://blog.csdn.net/greatverve/archive/2008/12/24/3596653.aspx

论坛讨论地址：

http://topic.csdn.net/u/20081222/17/2e156624-d15e-4bc4-9c81-2b062ff57b85.html

练习代码：

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>自定义动画</title>
    <script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
    <style type="text/css">
        .dis{display:none;}
        .show{display:block;}
    </style>
    <script type="text/javascript">
    // 在一个动画中同时应用三种类型的效果
    $(function (){
        $("#go").click(function(){
          $("#block").animate({ 
            width: "150px",//用百分比，表示相对窗口的宽度。
            height: "100px", //可以用数字代替
            fontSize: "2em", //div里文字字体大小
            borderWidth: 10
          }, 1000 );
        }); 
        //此法不通
//        $("#go").click(function(){
//            $("#block").animate({"bottom":"+50"},600); 
//        });
        $("#back").click(function(){
            $("#block").css({display:'none'});
        });
        //加上这个，消失后又显现。
//        $("#back").click(function(){
//          $("#block").animate({ 
//            width: "0px",//设为0即消失
//            height: "0px", 
//            fontSize: "2em", 
//            borderWidth: 10
//          }, 1000 );
//        }); 
    });
    </script>    
</head>
<body>
<div>
    <button id="go"> Run</button>
    <button id="back">goback</button>
    <div id="block" style="background:#369; width:0px; height:0px; ">Hello!</div> 
    <div>hi</div>
</div>
</body>
</html>
 

end