The difference between hide and fadeOut in jQuery The difference between show and fadeIn-JS Tutorial-php.cn

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

巴扎黑

Release： 2017-06-29 11:59:56

Original

1556 people have browsed it

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>

Copy after login

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!