Comment configurer Click Div pour glisser vers la gauche et se cacher dans jquery-Questions et réponses frontales-php.cn

Comment configurer Click Div pour glisser vers la gauche et se cacher dans jquery

WBOY

Libérer： 2022-04-24 18:30:29

original

1618 Les gens l'ont consulté

Méthode : 1. Utilisez "$("div").click(function(){})" pour ajouter un événement de clic à l'élément div et spécifiez la fonction de traitement d'événement ; dans la fonction ({right:"Distance de trait gauche",opacity:'0'},time);" Il suffit de le définir.

Comment configurer Click Div pour glisser vers la gauche et se cacher dans jquery

L'environnement d'exploitation de ce tutoriel : système windows10, version jquery3.2.1, ordinateur Dell G3.

Comment configurer le div pour qu'il glisse vers la gauche et se cache lorsque vous cliquez dessus dans jquery

La méthode animate() exécute une animation personnalisée d'un ensemble de propriétés CSS.

Cette méthode fait passer un élément d'un état à un autre via les styles CSS. Les valeurs des propriétés CSS changent progressivement, vous permettant de créer des effets animés.

Seules les valeurs numériques peuvent être animées (telles que "margin:30px"). Les valeurs de chaîne ne peuvent pas être animées (telles que « background-color:red »).

Astuce : Veuillez utiliser "+=" ou "-=" pour créer des animations relatives.

Syntaxe

(selector).animate({styles},speed,easing,callback)

Copier après la connexion

Description des paramètres

styles requis. Spécifie une ou plusieurs propriétés/valeurs CSS qui produisent des effets d'animation.

Remarque : lorsqu'il est utilisé avec la méthode animate(), le nom de la propriété doit être camelCase : vous devez utiliser paddingLeft au lieu de padding-left, marginRight au lieu de margin-right, etc.

L'exemple est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>123</title>
<script src="js/jquery.min.js">
</script>
    <script type="text/javascript">
        $(function () {
            $("#panel").click(function () {
                $(this).animate({ right: "100px",opacity:&#39;0&#39; }, 2000);
            })
        })
    </script>
</head>
<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
 
        body {
            padding: 100px;
        }
 
        #panel {
            position: relative;
            width: 100px;
            height: 100px;
            border: 1px solid #0050D0;
            background: #96E555;
            cursor: pointer;
        }
    </style>
<body>
<div id="panel"></div>
</body>
</html>

Copier après la connexion

Résultat de sortie :

Comment configurer Click Div pour glisser vers la gauche et se cacher dans jquery

Recommandation de didacticiel vidéo associé : Tutoriel vidéo jQuery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Comment configurer Click Div ​​pour glisser vers la gauche et se cacher dans jquery

Comment configurer le div pour qu'il glisse vers la gauche et se cache lorsque vous cliquez dessus dans jquery

Comment configurer Click Div pour glisser vers la gauche et se cacher dans jquery