Maison >interface Web >js tutoriel >L'utilisation et la base de la fonction de rappel jQuery (callback)

L'utilisation et la base de la fonction de rappel jQuery (callback)

PHPzoriginal: 2016-05-16 16:16:391454parcourir

Cet article présente principalement l'utilisation et le fondement de la fonction de rappel jQuery (callback). Les amis qui en ont besoin peuvent s'y référer

Il est préférable de publier le code en premier

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery.js"></script>
    </head>
<style>
body{font-family: "微软雅黑";width: 980px; margin: 0 auto; text-align: center;}
    .box{
        width: 300px;
        height: 300px;
        background: green;
        border: 1px solid #e6e6e6;
        margintop: 50px;
        line-height: 200px;
        position: absolute;
    }
button{
    border: none;
    background: green;    
    width: 100px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 16px;
    margin-top: 50px;
    }
</style>
    <body>
        <button>点击开始动画</button>
        <p class="box" ></p>
        <script> 
            $(document).ready(function(){
              $("button").click(function(){
                var p=$(".box");
                p.animate({height:&#39;200px&#39;,opacity:&#39;0.4&#39;},"slow");
                p.animate({width:&#39;200px&#39;,opacity:&#39;0.8&#39;},"slow");
                p.animate({height:&#39;100px&#39;,opacity:&#39;0.4&#39;},"slow");
                p.animate({width:&#39;100px&#39;,opacity:&#39;0.8&#39;},"slow");
                p.animate({right:&#39;100px&#39;,opacity:&#39;0.8&#39;},"slow");
                p.animate({bottom:&#39;100px&#39;,opacity:&#39;0.8&#39;},"slow");
                p.animate({left:&#39;100px&#39;,opacity:&#39;0.8&#39;},"slow");
                p.animate({top:&#39;100px&#39;,opacity:&#39;0.8&#39;},"slow",function(){
                    alert("The paragraph is over");
                });
              });
            });
        </script> 
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    var p=$(".box");
                        p.animate({height:&#39;300px&#39;,opacity:&#39;0.4&#39;},"slow");
                        p.animate({width:&#39;300px&#39;,opacity:&#39;0.8&#39;},"slow");
                        p.animate({height:&#39;100px&#39;,opacity:&#39;0.4&#39;},"slow");
                        p.animate({width:&#39;100px&#39;,opacity:&#39;0.8&#39;},"slow",function(){
                    alert("The paragraph is over");
              　　　　  });
                    });
                });
            });
        </script>
    </body>
</html>

La fonction dite de rappel , en fait, vous pouvez définir de nombreuses valeurs différentesdans les paramètres de vitesse ou de durée, telles que "lent", "rapide", "normal" ou millisecondes, puis ajouter une fonction après. pour afficher le contenu correspondant pour rappeler aux internautes.

Ce qui précède représente l'intégralité du contenu de ce chapitre. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo jQuery !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Partager une nouvelle compréhension de ce pointeur dans les compétences JavaScript_javascriptArticle suivant：Partager une nouvelle compréhension de ce pointeur dans les compétences JavaScript_javascript

Articles Liés

Voir plus