jQuery Effects in Hindi | jQuery Show, hide, fadIn, fadeOut, Animation Effects

by
Table of Contents hide
1 jQuery Effects in Hindi
2 jQuery Effects List
2.1 jQuery show() and hide() effect
2.2 jquery toggle() effect
2.3 fadeIn effect
2.4 fadeOut() effect
2.5 fadeToggle() effect
2.6 jQuery slideUp()
2.7 jQuery slideIn()
2.8 slideToggle() effect
2.9 jQuery Animate effect
3 अन्य jquery Tutorial के सुझाव

jQuery Effects in Hindi

jQuery में कुछ खास functions define किया गया है जो html elements में effects डालने में काम आता है |

jquery effects में हम time duration से set कर सकतें हैं | और ये value इन 4 तरीकें से डाल सकतें हैं :

  1. slow
  2. normal
  3. fast
  4. number(millisconds)

jQuery Effects List

  1. show()
  2. hide()
  3. toggle()
  4. fadeIn()
  5. fadeOut()
  6. fadeToggle()
  7. slideUp()
  8. slideDown()
  9. slideToggle()
  10. animate()

jQuery show() and hide() effect

jQuery show() method html elements को show effect देने के लिए उपयोग होता है |

jQuery hide() method html elements को hide effect देने के लिए उपयोग होता है |

उदाहरण:

<html>
 <head>
  <title>jQuery Tutorial</title>
  <script src="js/jquery.js"></script>
  <script>
    $(document).ready(function(){
	 $("#hideBtn").click(function()
	  {
	    $("p").hide();
	  });
	  $("#showBtn").click(function()
	  {
	    $("p").show();
	  });
	});
  </script>   
 </head>
 <body>
   <h1>Jquery Effects Example</h1>
    <p>this is first paragraph</p>
    <p>this is second paragraph</p>
    <p>this is third paragraph</p>
    <input type="button" value="Show" id="showBtn"></input>
    <input type="button" value="hide" id="hideBtn"></input>
 </body>
</html>

उदाहरण में सारे paragraphs को show और hide button के जरिये show(), hide() effect दी गयी है | जैसे ही hide button पे click करेंगे तो सारे पैराग्राफ hide हो जायेंगी | वैसे ही show button पे click करने के बाद सारे पैराग्राफ दिखाई देने लगेगीं |

Syntax
$(“selector”).show(timeDuration, callback)
$(“selector”).hide(timeDuration, callback)

parameters of show() and hide() effect

jquery show() and hide() effects में 2 parameter ले सकतें हैं और वो है : 1) time duration, 2) callback function

time duration में jquery effect को कितना धीरे या तेज़ करके दिखाना है वो बताता है | इसकी value ‘slow’ या ‘fast’ दे सकतें हैं | या फिर milliseconds में भी value दे सकतें हैं | 1000 milliseconds, 1sec को दर्शाता है |

callback function वो function है जो effect पूरा होने के बाद run करेगा |

नॉट पॉइंट time duration और callback parameters दोनों optional parameters हैं |

चलिए show() और hide() effect को उसके दोनों parameters के साथ उदाहरण में देखतें हैं |

उदाहरण:

<html>
 <head>
   <title>jQuery Tutorial</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">    </script>
  <script>
    $(document).ready(function(){
     $("#hideBtn").click(function()
      {
	$("p").hide('slow', function(){alert("paragraph is hidden")});
      });
      $("#showBtn").click(function()
       {
	 $("p").show(2000, function(){alert("paragraph is shown")});
       });	  
    });
   </script>   
 </head>
 <body>
   <h1>Jquery Effects Example</h1>
   <p>paragraph for show and hide effects</p>	
   <input type="button" value="show" id="showBtn"></input>
   <input type="button" value="hide" id="hideBtn"></input>
 </body>
</html>

jquery toggle() effect

jquery toggle() method elements को show और hide दोनों effect देने के लिए काम आता है | अगर element hide condition में है तो उसे show कराता है | और अगर element show condition में है तो उसे hide कराता है |

toggle() method से एक ही button click पे दोनों effects लिखी जा सकती है |

उदाहरण

<html>
 <head>
  <title>jQuery Tutorial</title>
  <script src="js/jquery.js"></script>
  <script>
   $(document).ready(function(){
     $("#toggleBtn").click(function()
      {
        $("p").toggle(1000);
      });	  
   });
  </script>   
 </head>
 <body>
  <h1>Jquery Effects Example</h1>
  <p>paragraph for toggle effect</p>
	
  <input type="button" value="toggle" id="toggleBtn"></input>
 </body>
</html>

toggle() effect में भी time duration और callback parameters ली जा सकती है | और ये optional parameters हैं |

उदाहरण:

$("p").toggle(1000, function(){alert("toggle effect is working")});

fadeIn effect

jquery fadeIn effect के जरिये element धुन्दला होकर hide होता है |

fadeOut() effect

धुन्दला हुआ element को उसके normal लुक में लाने के लिए fadeOut() effect का उपयोग होता है |

Syntax
$(“selector”).fadeIn(timeDuration, callback)
$(“selector”).fadeOut(timeDuration, callback)

timeDuration औरcallback दोनों optional parameters हैं | time duration में value, milliseconds में डाल सकतें हैं या फिर ‘slow’ या ‘fast’ भी दे सकतें हैं |

callback parameter में उस method को बताया जाता है जो fadeIn() या fadeOut() effect के बाद run होगा |

fadeToggle() effect

fadeToggle() effect के जरिये fadeIn और fadeOut दोनों effects को एक ही बार लिख सकतें हैं | ये dual काम करता है | अगर element fadeIn है, तो उसे fadeOut() करता है और अगर element fadeOut है, तो उसे fadeIn करता है |

उदाहरण

<html>
 <head>
  <title>jQuery Tutorial</title>
  <style>
    div{width: 200px; height:100px; background-color:blue;margin:5px;} 
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
  $(document).ready(function(){	 
    $("#fadeOutBtn").click(function(){$("div").fadeOut(2000);});
    $("#fadeInBtn").click(function(){$("div").fadeIn(2000);});	
    $("#fadeToggleBtn").click(function(){$("div").fadeToggle(5000);});	  
   });
  </script>   
 </head>
 <body>
   <h1>Jquery Effects Example</h1>
   <div>
    <p>paragraph for fade effect</p>
   </div>   
   <input type="button" value="fadeOut" id="fadeOutBtn"></input>
   <input type="button" value="fadeIn" id="fadeInBtn"></input>
   <input type="button" value="fadeToggle" id="fadeToggleBtn"></input>
 </body>
</html>

jQuery slideUp()

jQuery slideUp() effect किसी element को sliding करके hide करवाता है |

jQuery slideIn()

jQuery slideIn() effect किसी element को sliding करके show करवाता है |

slideToggle() effect

slideToggle() effect के जरिये slideUp और slideDown दोनों effects को एक ही बार लिख सकतें हैं | ये dual काम करता है | अगर element slideUp है, तो उसे slideDown() करता है और अगर element slideDown है, तो उसे slideUp करता है |

Syntax
$(“selector”).slideUp(timeDuration, callback)
$(“selector”).slideDown(timeDuration, callback)
$(“selector”).slideToggle(timeDuration, callback)

इसमें भी time duration और callback दोनों optional parameters हैं | time duration में value, milliseconds में डाल सकतें हैं या फिर ‘slow’ या ‘fast’ भी दे सकतें हैं | callback parameter में वो method लिख सकतें जिसे effect के बाद run करना होता है |

उदाहरण

<html>
 <head>
   <title>jQuery Tutorial</title>
   <style>
    div{width: 200px; height:100px; background-color:blue;margin:5px;} 
   </style>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
  $(document).ready(function(){	 
  $("#slideUpBtn").click(function()
{
	    $("div").slideUp(2000);
	  });
    $("#slideDownBtn").click(function(){
	    $("div").slideDown(2000);
	  });	
    $("#slideToggleBtn").click(function(){
	    $("div").slideToggle(1000);
	  });	  
	});
   </script>   
 </head>
 <body>
   <h1>Jquery Effects Example</h1>
   <div>
    <p>paragraph for slide effect</p>
   </div>   
   <input type="button" value="slideUp" id="slideUpBtn"></input>
   <input type="button" value="slideDown" id="slideDownBtn"></input>
   <input type="button" value="slideToggle" id="slideToggleBtn"></input>
 </body>
</html>

jQuery Animate effect

jquery animate effect के जरिये html element में custom animation लगा सकतें हैं |

animate method syntax:
$(selector).animate({params},speed,callback);

  • selector – जिस html element पे animation लगाना है उसे selector में देना होता है |
  • params – इसमें css properties लिखी जाती है जिससे animation effect देनी होती है | इस parameter में हमेसा css properties को {} curly bracket के अंदर लिखी जाती है |
  • speed – ये optional parameter है | इस value से animation की speed बताई जाती है | इसमें ‘slow’, ‘fast’ या फिर millisecond value डाल सकतें हैं |
  • callback – animation effect के बाद कोई action को run करना है उसे callback मे method बनाके लिखी जाती है | ये भी एक optional parameter है |

उदाहरण:

<!DOCTYPE html>
<html>
<head>
<style>
 div{
      background:blue;
      height:100px;
      width:200px;
      position:relative;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#animate").click(function(){
    $("div").animate({left: '250px'});
    $("div").animate({top:'200px'}, 'slow');
    $("div").animate({width:'300px'},1000, 
		function(){alert('animation complete')});
  });
});
 </script> 
 </head>
 <body>
  <h1>Animation Example</h1>
  <input type="button" value="animate" id="animate"></input>
  <p></p>
  <div></div>
 </body>
</html>

आशा है आपको jQuery effects क्या है और इसके प्रकार समझ में आया होगा | उदाहरण में दिए गए code को notepad में copy करके .html extension के साथ save करें | और किसी भी browser में run करके इसका output देखें |

अन्य jquery Tutorial के सुझाव