Maison > Article > interface Web > Comment configurer Click Div pour glisser vers la gauche et se cacher dans jquery
Comment configurer Click Div pour glisser vers la gauche et se cacher dans jquery
- WBOYoriginal
- 2022-04-24 18:30:291518parcourir
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.
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)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:'0' }, 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>Résultat de sortie :
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!