search

Home >Web Front-end >JS Tutorial >How jQuery uses fadeout to achieve element fading effect_jquery

How jQuery uses fadeout to achieve element fading effect_jquery

WBOY
WBOYOriginal
2016-05-16 16:07:291340browse

The example in this article describes how jQuery uses fadeout to achieve the fading effect of elements. Share it with everyone for your reference. The specific analysis is as follows:

The following JS code demonstrates the effect of jQuery controlling the gradual hiding of color block elements, and you can control the hiding speed

<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
 });
});
</script>
</head>
<body>
<p>Demonstrate fadeOut() with different parameters.</p>
<button>Click to fade out boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;">
</div><br>
<div id="div2" style="width:80px;height:80px;background-color:green;">
</div><br>
<div id="div3" style="width:80px;height:80px;background-color:blue;">
</div>
</body>
</html>

I hope this article will be helpful to everyone’s jQuery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery uses append to add multiple contents at the same time after html elements_jqueryNext article：jQuery uses append to add multiple contents at the same time after html elements_jquery

Related articles

See more