jQ 动画 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #div1{
                background-color: blueviolet;
                height: 100px;
                width: 100px;
                position: relative;
            }
            #div2{
                background-color: blue;
                height: 50px;
                width: 50px;
                position: relative;
            }
            #div3{
                background-color:yellowgreen;
                height: 100px;
                width: 100px;
                position: relative;
            }
        </style>
    </head>
    <body>
        
        <button type="button" id="btn1">click</button>
        <button type="button" id="btn2">Animate Queue</button>
        <div id="div1">div1</div>
        <div id="div2"></div>
        
        <p>停止效果</p>
        <button type="button" id="btn3">Start</button>
        <button type="button" id="btn4">Stop</button>
        <button type="button" id="btn5">Stop ALL</button>
        <button type="button" id="btn6">Stop AND Finish</button>
        <div id="div3">DIVDIVDIV</div>
        
        <p>CallBack</p>
        <p id="p1">this is p</p>
        <button type="button" id="btn7">Click</button>
        
        
        
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="JQ_animate.js"></script>
    </body>
</html>
//动画效果 $(selector).animate({params},speed,callback);
    //必需的 params 参数定义形成动画的 CSS 属性。
        //使用 Camel 标记法书写所有的属性名，
        //比如，必须使用 paddingLeft 而不是 padding-left
    //默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。
    //如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。
    $(document).ready(function(){
        $("#btn1").click(function(){
            $("#div1").animate({
                
                left:"250px",
                opacity:'0.5',
                height:'+=150px',
                width:'150px',
                //生成颜色动画需要下载 Color Animations
                backgroundColor:"red"
                
            },"slow");
            
            $("#div2").animate({
                // 预定义的值 toggle slow fast
                height:'toggle',
            },"slow");
            
        });
        $("#btn2").click(function(){
            var div=$("#div1");
            div.animate({height:'300px',opacity:'0.4'},"slow");
            div.animate({width:'300px',opacity:'0.8'},"slow");
            div.animate({height:'100px',opacity:'0.4'},"slow");
            div.animate({width:'100px',opacity:'0.8'},"slow");
        })
        
        /**
         * $(selector).stop(stopAll,goToEnd);
         * stopAll 参数规定是否应该清除动画队列
         *  goToEnd 参数规定是否立即完成当前动画
         */
        $("#btn3").click(function(){
            var div=$("#div3");
            div.animate({left:"250px",opacity:'0.4'},5000);
            div.animate({fontSize:"3em"},5000);
        })
         $("#btn4").click(function(){
            $("#div3").stop();
         });
        
          $("#btn5").click(function(){
             $("#div3").stop(true);
          });
        
          $("#btn6").click(function(){
             $("#div3").stop(true,true);
          });
          
          /**
           * Callback 当hide结束后再alert
           */
         $("#btn7").click(function(){
             $("#p1").hide("slow",function(){
                alert("p1 has hiden");
            });
            
         }) 
          
          
    });

 

posted @ 2022-03-30 17:36  lwx_R  阅读(39)  评论(0)    收藏  举报