jQuery fadeIn(), fadeOut() and fadeTo() example
jQuery comes with three handy methods to create the fading effect easily.
- fadeIn() – Display the matched elements with fade in effect.
- fadeOut() – Hide the matched elements with fade out / transparent effect.
- fadeTo() – Fading the matched elements to certain opacity.
Above three methods are support duration as parameter : slow, fast, or exact milliseconds. If this parameter is omitted, the default 400 milliseconds is apply.
Try it yourself
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
.fadeOutbox, .fadeInbox, .fadeTobox{
float:left;
padding:8px;
margin:16px;
border:1px solid red;
width:200px;
height:50px;
background-color:#000000;
color:white;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<h1>jQuery fadeIn(), fadeOut() and fadeTo() example</h1>
<div class="clear">
<h2>fadeOut() example</h2>
<div class="fadeOutbox">
Click me - fadeOut()
</div>
<div class="fadeOutbox">
Click me - fadeOut()
</div>
</div>
<div class="clear">
<h2>fadeIn() example</h2>
<div class="fadeInbox">
Click me - fadeIn()
</div>
<div class="fadeInbox">
Click me - fadeIn()
</div>
</div>
<div class="clear">
<h2>fadeTo() example</h2>
<div class="fadeTobox">
Click me - fadeTo()
</div>
<div class="fadeTobox">
Click me - fadeTo()
</div>
</div>
<div class="clear">
<button id=reset>Reset</button>
</div>
<script type="text/javascript">
$(".fadeOutbox").click(function () {
$(this).fadeOut('slow');
});
$(".fadeInbox").click(function () {
$(this).hide().fadeIn(2000);
});
$(".fadeTobox").click(function () {
$(this).fadeTo('fast',0.2);
});
$("#reset").click(function(){
location.reload();
});
</script>
</body>
</html>
About Author
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.
hi there,
is there any one can help us to make this better,
we are making video using rtcrecorder . we are success to make video but the issue is when we start the video using webcam camera start the recording and when we stop the recording the video get long time to show the video that we recorded by webcam so i need to set the loader in between before show the video so please help us.
Thanks in advance.
this is video tag code where show the video
hi i have a doubt regarding Jquery show hide function. i wrote it for 2 radio buttons they are working fine. one radio button id is 0 which should be hided and other one is 1 which should be shown .for showing the id 1 with one click it should get displayed but here when i click for first time it is showing and hiding whereas when i click on the same radiobutton for the second time it is displayed .i didn’t use any double click function and when i inspected the element and when i was examining the script in the browser console the script was replicating itself as many times when i click on radio buttons. framework i use is Prestashop. please help me
HIde
Thanks
Hi Nobby
try this out..
Fade in / out / to….
$(document).ready(function(){
$(“.myDiv”).mouseover(function(){
$(this).fadeTo(“slow”,0.25);
});
$(“.myDiv”).mouseout(function(){
$(this).fadeTo(“slow”,1);
});
$(“.myDiv1”).click(function(){
$(this).fadeOut();
});
$(“.in”).click(function(){
$(“.myDiv1”).fadeIn();
$(“.myDiv”).fadeIn();
});
});
Fade To
Click on me and I will hide
Fade In
Great effect, works great.
I have only 1 doubt, Is there any way to set a div to be hidden at first and then fade in? I tried with the #div:hidden but it didn’t work. Please if somebody knows. 🙂
you should apply this to div which you want display hidden when page load.
Make your div or element hidden in your css.
display:none;
or
visibility:hidden;
then fadeIn.
you can try like this :
I AM IN HIDE
Hi,
I like the demo first of all, I have a small query that if I use fadeTo effect to one image on hover (anchor)and when I remove my hover from the image I want my image to come back to its original condition.
Please suggest what should I do .
Noddy