If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
jQuery की help से हम आसानी से किसी element की visibility को fade in या out कर सकते हैं। इसके लिए कुछ methods provide किये गए हैं -
fadeIn() method का use किसी hidden element को फिर fade in (appear) करने के लिए use किया जाता है।
$(target_element).fadeIn(speed, callback_fun);
fadeIn() method दो parameter accept करता है, और दोनों parameters Optional होते हैं।
speed : यह milliseconds में time accept करता है , दिए गए time के according ही element fade in होता है। अगर time pass नहीं किया गया तो element instant fade in हो जायगा। speed value में हम "slow", "fast", or milliseconds time दे सकते हैं।
callback : यह callback function होता है , जो कि element को fade in करने के बाद run होता है। JS Callback Functions
File : fadein.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery fadeIn Exampel </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<!-- apply css style and hide the elemnts -->
<div id="fadein_div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="fadein_div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="fadein_div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
<div id="fadein_div4" style="width:80px;height:80px;display:none;background-color:violet;"></div>
<p>Click on this button.</p>
<button id="fadein_btn" title="Click here to see result">Fade In</button>
<script>
window.onload = function(){
if(window.jQuery){
$('#fadein_btn').click(function(event){
$('#fadein_div1').fadeIn(); /*instant fade in*/
$('#fadein_div2').fadeIn('slow'); /*slow fade in*/
$('#fadein_div3').fadeIn(4000); /*fade in, in 4 second*/
$('#fadein_div4').fadeIn(function(){
/** callback */
console.log('fade in successfully');
});
});
}
};
</script>
</body>
</html>
Click on this button.
fadeOut() method का use fadeIn() से just उल्टा होता है , fadeOut() किसी element को fade out करता है। यह भी fadeIn() की तरह दो parameter accept करता है।
File : fadeout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery fadeOut Exampel </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="fadeout_div1" style="width:80px;height:80px;background-color:red;"></div>
<div id="fadeout_div2" style="width:80px;height:80px;background-color:green;"></div>
<div id="fadeout_div3" style="width:80px;height:80px;background-color:blue;"></div>
<div id="fadeout_div4" style="width:80px;height:80px;background-color:violet;"></div>
<p>Click on this button.</p>
<button id="fadeout_btn" title="Click here to see result">Fade Out</button>
<script>
window.onload = function(){
if(window.jQuery){
$('#fadeout_btn').click(function(event){
$('#fadeout_div1').fadeOut(); /*instant fade out*/
$('#fadeout_div2').fadeOut('slow'); /*slow fade out*/
$('#fadeout_div3').fadeOut(4000); /*fade out in 4 second*/
$('#fadeout_div4').fadeOut(function(){
/** callback */
console.log('fade out successfully');
});
});
}
};
</script>
</body>
</html>Click on this button.
fadeToggle() function , किसी element को fade in या fade out करता है , अगर element पहले से hide है तो उसे fade in (appear) कर देगा और अगर element show हो रहा है तो उसे fade out (disappear) कर देगा।
File : fadetoggle.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery fadeToggle Example </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="fadeToggle_div1" style="width:80px;height:80px;background-color:red;"></div>
<div id="fadeToggle_div2" style="width:80px;height:80px;background-color:green;"></div>
<div id="fadeToggle_div3" style="width:80px;height:80px;background-color:blue;"></div>
<div id="fadeToggle_div4" style="width:80px;height:80px;background-color:violet;"></div>
<p>Click on this button to see result.</p>
<button id="fadeToggle_btn" title="Click here to see result">Fade Toggle</button>
<script>
window.onload = function(){
if(window.jQuery){
$('#fadeToggle_btn').click(function(event){
$('#fadeToggle_div1').fadeToggle();
$('#fadeToggle_div2').fadeToggle('slow');
$('#fadeToggle_div3').fadeToggle(4000);
$('#fadeToggle_div4').fadeToggle(function(){
/** callback */
console.log('fade toggle successfully');
});
});
}
};
</script>
</body>
</html>Click on this button to see result.
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
