Une compréhension préliminaire de l'animation jQuery

Animation jQuery

Lors de l'exécution de programmes Web, des couches contextuelles sont souvent utilisées, comme cliquer sur du texte ou des boutons pour afficher un texte d'invite, etc. Supposons que les conditions suivantes soient remplies :

Cliquez sur le bouton "Afficher le texte d'invite" dans l'image pour afficher un calque contextuel sous le bouton. Cliquez sur n'importe quel espace. zone ou couche contextuelle et la couche contextuelle disparaît.

Nous pouvons également terminer ce travail en utilisant le javascript original. Il y a les points suivants à noter :

1. la position du calque contextuel doit être calculée dynamiquement, car l'objet qui déclenche l'événement contextuel Il peut apparaître n'importe où sur la page, comme la position dans la capture d'écran. >2. Lier un clic au document est une fonction qui ferme la couche contextuelle. Vous devez utiliser un délégué de multidiffusion, sinon cela peut entrer en conflit avec la couche contextuelle. Supprimez les fonctions que d'autres ont liées au document. 🎜>

3. Après avoir lié la fonction de fermeture au document, vous devez annuler l'événement bouillonnant dans la fonction d'affichage, sinon le calque contextuel sera affiché immédiatement..

En utilisant jQuery, nous pouvons facilement implémenter cet exemple :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>jQuery - Start Animation</title>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {            //动画速度
            var speed = 500;            //绑定事件处理
            $("#btnShow").click(function(event)
            {                //取消事件冒泡
                event.stopPropagation();                //设置弹出层位置
                var offset = $(event.target).offset();
                $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });                //动画显示
                $("#divPop").show(speed);
            });            //单击空白区域隐藏弹出层
            $(document).click(function(event) { $("#divPop").hide(speed) });            //单击弹出层则自身隐藏
            $("#divPop").click(function(event) { $("#divPop").hide(speed) });
        });    </script></head><body>
    <div>
        <br /><br /><br />
        <button id="btnShow">显示提示文字</button>
    </div>
        
    <!-- 弹出层 -->
    <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;
        width: 300px; height: 100px;">
        <div style="text-align: center;">弹出层</div>
    </div>
    </body>
    </html>

En plus d'implémenter les fonctions de base d'affichage et de masquage, afficher et masquer désormais le calque contextuel est un effet d'animation de dégradé de jQuery ! La fonction d'animation est si simple et cela m'a donné une surprise inattendue lorsque je l'ai utilisée pour la première fois dans un projet. J'avais mal à la tête en calculant la position dans les navigateurs, mais via la fonction offset() et la fonction height() de jQuery. , je peux calculer avec précision la position du calque contextuel. Ces fonctions sont encapsulées et multi-navigateurs. Vous devez faire attention à l'ajout de "px" lors de la définition de l'attribut de position du calque contextuel, sinon des problèmes surviendront facilement sous FireFox. .

Les fonctions d'animation de jQuery sont principalement divisées en trois catégories :

Fonction d'animation de base : elle a à la fois un dégradé de transparence et un effet de glissement. fonction d'animation : utilise uniquement l'effet de dégradé coulissant. Fonction d'animation de fondu entrant et sortant : utilisez uniquement l'effet de dégradé de transparence

Ces trois types de fonctions d'animation ont des effets différents et leur utilisation est fondamentalement la même. pouvez l'essayer vous-même.

De plus, peut-être ce qui précède. Aucun des trois types d'effets de fonction n'est ce que nous voulons, donc jQuery fournit également des fonctions d'animation personnalisées, nous mettant le contrôle et nous permettant de définir les effets d'animation

Voici les trois types d'animations intégrées. Les fonctions et les fonctions d'animation personnalisées sont expliquées séparément

Formation continue

nouveau fichier

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>jQuery - Start Animation</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //动画速度 var speed = 500; //绑定事件处理 $("#btnShow").click(function(event) { //取消事件冒泡 event.stopPropagation(); //设置弹出层位置 var offset = $(event.target).offset(); $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left }); //动画显示 $("#divPop").show(speed); }); //单击空白区域隐藏弹出层 $(document).click(function(event) { $("#divPop").hide(speed) }); //单击弹出层则自身隐藏 $("#divPop").click(function(event) { $("#divPop").hide(speed) }); }); </script></head><body> <div> <br /><br /><br /> <button id="btnShow">显示提示文字</button> </div>  <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none; width: 300px; height: 100px;"> <div style="text-align: center;">弹出层</div> </div> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Une compréhension préliminaire de l'animation jQuery

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]