Home > Article > Web Front-end > The difference between hide and fadeOut in jQuery The difference between show and fadeIn

The difference between hide and fadeOut in jQuery The difference between show and fadeIn

巴扎黑Original: 2017-06-29 11:59:561526browse

What is the difference between the display effects of

hide and fadeOut ? show and fadeIn have the same display effect?

Many friends will encounter this problem when learning jQuery, # Both ##hide and fadeOut can have parameters:
$(selector).hide(speed,callback);
$(selector).fadeOut(speed,callback);
First of all, we can tell from the name hide means hiding and fadeOut means fading out. Of course, the specific difference cannot be seen in the name, it can only reflect that they are different. But when we set the parameter speed a little longer, we can see the difference. And the achieved effects appear to be similar, so they are mistakenly thought to be the same, but they are not.

Let us write the following code:

<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type=text/
javascript
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(
document
).ready(function(){
  $("button.dl").click(function(){
    $("#p1").fadeOut(3000);
  });
});
$(document).ready(function(){
  $("button.dll").click(function(){
    $("#p2").hide(3000);
  });
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeOut() 方法。</p>
<button class="dl">点击这里，使红色矩形1淡出(fadeOut)</button>
<br><br>
<p id="p1" style="width:80px;height:80px;
background-color
:red;"></p>
<br><br>
<button  class="dll">点击这里，使红色矩形2隐藏(hide)</button>
<br><br>
<p id="p2" style="width:80px;height:80px;background-color:red;"></p>
</body>
</html>

Okay now We can test it and see the difference at a glance.

Yes, hideThe hidden effect is to slowly fold and shrink from bottom to top or from bottom right to top left, and fadeOut’s fade-out effect is to fade out until it disappears . Okay, now we can test it and see the difference at a glance.

The same is true for show and fadeIn The difference is, please change the code and try it yourself.

The above is the detailed content of The difference between hide and fadeOut in jQuery The difference between show and fadeIn. For more information, please follow other related articles on the PHP Chinese website!

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：Learn about the use of fadeOut() method in jQueryNext article：Learn about the use of fadeOut() method in jQuery

See more

The difference between hide and fadeOut in jQuery The difference between show and fadeIn

Related articles