Home > Developer > Web Develop
What is the difference between the hide and fadeout display effects? Show and Fadein display the same 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 we can see from the name of hide is hidden and fadeout is fade, of course, the name can not see the specific difference, can only reflect they are different. But when we set the parameter speed slightly longer, we can see the difference. And the effect of the implementation of the display is similar, so it was mistaken for the same, but it is not.
Let's write down the following code:
<! DOCTYPE html><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 () {
$ ("#div1"). FadeOut (3000);
});
});
$ (document). Ready (function () {
$ ("Button.dll"). Click (function () {
$ ("#div2"). Hide (3000);
});
});
</script>
<body>
<p> demonstrates the FadeOut () method with different parameters. </p>
<button class= "DL" > click here to make the red rectangle 1 Fade Out (fadeOut) </button>
<br><br>
<div id= "Div1" style= "width:80px;height:80px;" ></div>
<br><br>
<button class= "DLL" > click here to make the red rectangle 2 Hidden (hide) </button>
<br><br>
<div id= "Div2" style= "width:80px;height:80px;" ></div>
</body>
OK now we can test, how to distinguish at a glance.
Yes, hide hides the effect from bottom to top or from lower right to top left, and the fade effect of fadeout is the overall fade until it disappears. OK now we can test, how to distinguish at a glance.
The same is true for show and Fadein, let's change the code to try it.
Reprint http://blog.csdn.net/chelen_jak/article/details/17419015
The difference between hide and fadeout in jquery Show and Fadein
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
