kesan animasi asas jQuery

Kesan animasi asas

tunjukkan(belanja,[panggilan balik]): Tunjukkan elemen padanan tersembunyi
sembunyi(belanja,[panggilan balik] ]): Sembunyikan elemen yang dipaparkan
togol(suis): Tukar keadaan elemen yang boleh dilihat mengikut parameter suis (true boleh dilihat, false disembunyikan).
togol(belanja,[panggilan balik]): Togol keadaan kelihatan semua elemen padanan dengan animasi elegan

<!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>

bahagian seterusnya

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik

Skrin penuh