L'utilisation et la base de la fonction de rappel jQuery (callback)-js tutoriel-php.cn

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

PHPz

Libérer： 2018-09-29 15:48:04

original

1485 Les gens l'ont consulté

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>

Copier après la connexion

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 !