Home >Web Front-end >Front-end Q&A >How to set click div to slide left and hide in jquery
How to set click div to slide left and hide in jquery
- WBOYOriginal
- 2022-04-24 18:30:291623browse
Method: 1. Use "$("div").click(function(){})" to add a click event to the div element and specify the event processing function; 2. Use "$( this).animate({right:"left stroke distance",opacity:'0'},time);" Just set it.
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
How to set click div to slide left and hide in jquery
The animate() method executes a custom animation of a CSS property set.
This method changes an element from one state to another through CSS styles. CSS property values change gradually, allowing you to create animated effects.
Only numeric values can be animated (such as "margin:30px"). String values cannot be animated (such as "background-color:red").
Tip: Please use " =" or "-=" to create relative animations.
Syntax
(selector).animate({styles},speed,easing,callback)Parameter Description
styles Required. Specifies one or more CSS properties/values that produce animation effects.
Note: When used with the animate() method, the property name must be camelCase: you must use paddingLeft instead of padding-left, marginRight instead of margin-right, and so on.
The example is as follows:
<!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>Output result:
Related video tutorial recommendation: jQuery video tutorial
The above is the detailed content of How to set click div to slide left and hide in jquery. For more information, please follow other related articles on the PHP Chinese website!