communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

effets d'animation de base jQuery

Effets d'animation de base

  • show(spend,[callback]) : Afficher les éléments correspondants cachés

  • hide(spend,[callback] ]) : Masquer l'élément affiché

  • toggle(switch) : Changer l'état visible de l'élément en fonction du paramètre switch (true est visible, false est masqué).

  • toggle(spend,[callback]) : basculez l'état visible de tous les éléments correspondants avec une animation élégante

<!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>
Formation continue
||
<!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>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492796 joue