jQuery基本動畫效果

基本動畫效果

  • show(spend,[callback]):顯示隱藏的符合元素

  • hide(spend,[callback ]):隱藏顯示的元素

  • toggle(switch):根據switch參數切換元素的可見狀態(true為可見,false為隱藏)。

  • toggle(spend,[callback]):以優雅的動畫切換所有符合的元素可見狀態

<!DOCTYPE html>
<html>
    <head>
        <title>php.cn</title>
        <meta charset="utf-8" />
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
        <script>
        function f1(){
            //隐藏 hidden
            //hide([时间参数 毫秒级][,处理函数])
            $('div').hide(3000,function(){
                alert('我消失了,你能看到么');
            });
        }
        function f2(){
            //显示 show
            //show([时间参数 毫秒级][,处理函数])
            $('div').show(3000,function(){
                alert('我又回来了');
            });
        }
        function f3(){
            $('div').toggle(2000);
        }
        </script>

        <style type="text/css">
        div {width:300px; height:200px; background-color:yellow;}
        </style>
    </head>
    <body>
        <div></div>
        <input type="button" value="隐藏" onclick="f1()" />
        <input type="button" value="显示" onclick="f2()" />
        <input type="button" value="开关" onclick="f3()" />
    </body>
</html>
繼續學習
||
<!DOCTYPE html> <html> <head> <title>php.cn</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script> function f1(){ //隐藏 hidden //hide([时间参数 毫秒级][,处理函数]) $('div').hide(3000,function(){ alert('我消失了,你能看到么'); }); } function f2(){ //显示 show //show([时间参数 毫秒级][,处理函数]) $('div').show(3000,function(){ alert('我又回来了'); }); } function f3(){ $('div').toggle(2000); } </script> <style type="text/css"> div {width:300px; height:200px; background-color:yellow;} </style> </head> <body> <div></div> <input type="button" value="隐藏" onclick="f1()" /> <input type="button" value="显示" onclick="f2()" /> <input type="button" value="开关" onclick="f3()" /> </body> </html>
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!