Home >Web Front-end >JS Tutorial >How to achieve click delete fade out effect in jquery
Methods to achieve the click-delete fade-out effect: 1. Bind the click event to the element and specify the event processing function; 2. Use the fadeTo() method in the event processing function to achieve the click-delete fade-out effect. The syntax is " The element object to fade out.fadeTo(speed,opacity,callback)”.
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
How jquery implements click-delete fade-out effect
In jquery, you can use the fadeTo() method and click event to achieve click-delete fade-out effect .
fadeTo() method gradually changes the opacity of the selected element to the specified value. The syntax is:
$(selector).fadeTo(speed,opacity,callback)
Among them:
The example is as follows:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeTo(1000,0);
});
});
</script>
</head>
<body>
<p>点击按钮淡出</p>
<button class="btn1">淡出</button>
</body>
</html>Output result:
Recommended related video tutorials: jQuery video tutorial
The above is the detailed content of How to achieve click delete fade out effect in jquery. For more information, please follow other related articles on the PHP Chinese website!