How to set click div to slide left and hide in jquery-Front-end Q&A-php.cn

How to set click div to slide left and hide in jquery

WBOY

Release： 2022-04-24 18:30:29

Original

1618 people have browsed it

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.

How to set click div to slide left and hide in jquery

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)

Copy after login

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:&#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>

Copy after login

Output result:

How to set click div to slide left and hide in jquery

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!