jQuery动画基础

最新推荐文章于 2024-08-30 10:25:23 发布

greatverve

最新推荐文章于 2024-08-30 10:25:23 发布

阅读量1.1k

点赞数

分类专栏： JS.JQuery 文章标签： jquery function callback class

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

版权

JS.JQuery 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

代码：

 
 <!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>jQuery动画基础</title>
    <script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
    <style type="text/css">
        .theImage{
            position:relative;
            background:Green;
            width:100px;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            $("#btnShow").click(function(){
                //$("#block").show(1000);//没有参数则没有动画效果
                //$("#block").fadeIn("slow");//根据透明度显示或隐藏
                $("#block").slideDown();//拉下来。只改变高度
            });
            $("#btnHide").click(function(){
                //$("#block").hide("normal");//slow,normal,fast
                //$("#block").fadeOut(5000);
                $("#block").slideUp();
            });
            
            //自定义动画
            $("#btnImage").click(function(){
                $("#imageDiv").animate(
                    //I
                    //移动到的位置,这里的位置是相对与原来的位置
                    //top即相对原来的位置向上移动多少距离,没搞明白,结果是向下移动了。
                    //{left:"400px",top:"100px"},
                    //3000
                    //II
                    {left:"+=50",width:"300px",height:"200px"},//改变位置的同时改变宽度高度
                    3000
                );
            });
            //同时执行两个动画，执行完一个，然后接着执行另一个。
            $("#btnImage").click(function(){
                $("#imageDiv").animate(
                    {left:"100px",width:"30px",height:"20px"},
                    3000,
                    function(){alert('callback函数');}//动画结束后要执行的函数
                );
            });
        });
    </script>
</head>
<body>
<div>
    <button id="btnShow"> Show</button>
    <button id="btnHide">Hide</button>
    <div id="block" style="background:#369; width:150px; height:100px; ">Hello!</div> 
    <button id="btnImage">moveImage</button>
    <div id="imageDiv" class="theImage">image</div>
    <div>hi</div>
</div>
</body>
</html>
 