jQueryの基本的なアニメーション効果

基本的なアニメーション効果

show(spend,[callback]): 非表示の一致する要素を表示
hide(spend,[callback]): 表示されている要素を非表示
toggle(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>

提出するリセットコード

自動運転