Basic web effect with jQuery

In this article you can find demos and sample code for basic effect functions in jQuery. We have: hide and show effect, fadeIn and fadeOut (disappearing) effect, slide down and slide up effect and animate effect. On my blog you can find more guides for cool javascript effects.

First you need to reference jQuery library (for more information see my first article about using jQuery.

Example:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>

Hide and show effect

Demo for show and hide function:

This paragraph can be shown or hidden

Code:

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
   $('#butShowHide').click(function()
   {
       $('#pShowHide').toggle();
   });
});
</script>
<p id="pShowHide" style="display:none">This paragraph can be shown or hidden</p>
<button id="butShowHide">Show/Hide</button>

When butShowHide is clicked, toggle function is called on paragraph pShowHide.
Toggle function displaying matched elements. If they are shown, toggle makes them hidden. If they are hidden, toggle makes them shown.
There are also show and hide function. Toggle function is easier to use because you don't have to check if element is showed or hidden.




Demo for show and hide function with slow argument:

This div can be shown or hided slow

Code:

<script type="text/javascript">
$(document).ready(function(){
    $("#butShowHideSlow").click(function () {
      
      $("#divShowHideSlow").toggle("slow");
    });
});
</script>
<button id="butShowHideSlow">Show and hide slowly</button>
<div style="width:300px;height:47px; border: solid 1px black;background-color:LightGrey;text-align:center;" id="divShowHideSlow">This div can be shown or hided slowly</div>

In this case we call toggle function with argument speed (toggle(speed)).
We set speed to slow.
Speed - A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).



FadeIn and FadeOut effect

Demo for fade in and fade out:

  

This paragraph can fade in and fade out

Code

<script type="text/javascript">
  $(document).ready(function(){ 
      $("#butFadeOut").click(function () {
          $("#pFadeInOut").fadeOut(3000);
        });
        
        $("#butFadeIn").click(function () {
          $("#pFadeInOut").fadeIn(3000);
        });
   });
</script>

<button id="butFadeOut">Fade Out</button>&nbsp;&nbsp;<button id="butFadeIn">Fade In</button>
<br />
<p id="pFadeInOut">This paragraph can fade in and fade out</p>

When button butFadeOut is clicked fadeOut function is called on paragraph pFadeInOut
fadeOut(3000) - fadeOut effect will run for 3 seconds.

When button butFadeIn is clicked fadeIn function is called on paragraph pFadeInOut.
fadeIn(3000) - fadeIn effect will run for 3 seconds.



Slide up and Slide down

Demo for slide up and slide down:

This toggle can be slide up and down

Code:

<script type="text/javascript">
  $(document).ready(function(){ 
    $('#butSlide').click(function () {
      $('#divSlide').slideToggle("slow");
    });
   });
</script>

<button id="butSlide">Slide up/down</button>
<br />
<div style="width:300px;height:47px; border: solid 1px black;background-color:LightGrey;text-align:center;" id="divSlide">This toggle can be slide up and down</div>

When button butSlide is clicked slideToggle function is called on div divSlide with argument slow.

slideToggle(speed) - Toggle the visibility of all matched elements by adjusting their height.


Animate effect

Demo for animate:

   

This paragraph can move left and right

Code:

<script type="text/javascript">
  $(document).ready(function(){ 
      $("#butLeft").click(function () {
        $("#pMovingParagraph").animate({"left": "-=50px", "opacity": 1}, 500);
      });
    
      $("#butRight").click(function () {
        $("#pMovingParagraph").animate({"left": " =50px", "opacity": 1}, 500);
      });
   });
</script>

<button id="butLeft">move left</button>&nbsp;&nbsp;&nbsp;<button id="butRight">move right</button>

When button butLeft is clicked animate function is called on paragraph pMovingParagraph.

When button butRight is clicked animate function is called on paragraph pMovingParagraph.

animate( params, [duration])

params - A set of style attributes that you wish to animate, and to what end.

duration - A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).


Related articles:
jQuery hello world
jQuery on blogspot (blogger) post
jQuery selectors samples