Thursday, 15 December 2011

jQuery Effects

Effects:
  •  Hide, Show, Toggle, Slide, Fade, and Animate.
Examples:
  1. jQuery hide() Demonstrates a simple jQuery hide() method.
  2. jQuery hide()  Another hide() demonstration. How to hide parts of text.
  3. jQuery slideToggle()  Demonstrates a simple slide panel effect.
  4. jQuery fadeTo()  Demonstrates a simple jQuery fadeTo() method.
  5. jQuery animate()  Demonstrates a simple jQuery animate() method.

1) jQuery Hide and Show

With jQuery, you can hide and show HTML elements with the hide() and show() methods:
syntax:

$("#hide").click(function(){
  $("p").hide();
});
$("#show").click(function(){
  $("p").show();
});


 Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>



2) Both hide() and show() can take the two optional parameters:speed and callback.



  • $(selector).hide(speed,callback)
  • $(selector).show(speed,callback)

The speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", "normal", or milliseconds:

Syntax:

  $("button").click(function(){
  $("p").hide(1000);
});
Example:

 <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button>Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

3)jQuery Toggle

The jQuery toggle() method toggles the visibility of HTML elements using the show() or hide() methods.
Shown elements are hidden and hidden elements are shown.
The callback parameter is the name of a function to be executed after the hide (or show) method completes.

  • $(selector).toggle(speed,callback)
  • The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.

Syntax:

$("button").click(function(){
  $("p").toggle();
});

Example

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<button>Toggle</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>

4) jQuery Slide - slideDown, slideUp, slideToggle

The jQuery slide methods gradually change the height for selected elements.
jQuery has the following slide methods:

  • $(selector).slideDown(speed,callback)
  • $(selector).slideUp(speed,callback)
  • $(selector).slideToggle(speed,callback)
The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.
The callback parameter is the name of a function to be executed after the function completes.

slideDown() Example

Syntax:
 $(".flip").click(function(){
  $(".panel").slideDown();
});

 Example:

<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>

<p class="flip">Show Panel</p>

</body>
</html>


slideUp() Example

Syntax:
 $(".flip").click(function(){
  $(".panel").slideUp()
})

 Example:
<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideUp("slow");
  });
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
</head>

<body>

<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>

<p class="flip">Hide Panel</p>

</body>
</html>



slideToggle() Example

syntax:
$(".flip").click(function(){
  $(".panel").slideToggle();
});
Example:

 
<html>
<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3Schools, you can study everything you need to learn, in an accessible and handy format.</p>
</div>

<p class="flip">Show/Hide Panel</p>

</body>
</html>



5) jQuery Fade - fadeIn, fadeOut, fadeTo

The jQuery fade methods gradually change the opacity for selected elements.
jQuery has the following fade methods:

  • $(selector).fadeIn(speed,callback)
  • $(selector).fadeOut(speed,callback)
  • $(selector).fadeTo(speed,opacity,callback)
The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.
The opacity parameter in the fadeTo() method allows fading to a given opacity.
The callback parameter is the name of a function to be executed after the function completes.

fadeTo() Example

syntax:
$("button").click(function(){
  $("div").fadeTo("slow",0.25);
});
Example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").fadeTo("slow",0.25);
  });
});
</script>
</head>

<body>
<div style="background:red;width:300px;height:300px">
<button>Click to Fade</button>
</div>
</body>
</html>

fadeOut() Example

syntax:
 $("button").click(function(){
  $("div").fadeOut(4000);
});
Example:
 
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").click(function(){
    $(this).fadeOut(4000);
  });
});
</script>
</head>

<body>
<div style="background:red;width:200px">CLICK ME AWAY!</div>
<p>If you click on the box above, it will be removed.</p>
</body>

</html>

6) jQuery Custom Animations

The syntax of jQuery's method for making custom animations is:

$(selector).animate({params},[duration],[easing],[callback])
The key parameter is params. It defines the CSS properties that will be animated. Many properties can be animated at the same time:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
The second parameter is duration. It specifies the speed of the animation. Possible values are "fast", "slow", "normal", or milliseconds.

Note: HTML elements are positioned static by default and cannot be moved.
To make elements moveable, set the CSS position property to fixed, relative or absolute.

Syntax:1

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
  });
});
</script> 

Example:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({height:300},"slow");
    $("div").animate({width:300},"slow");
    $("div").animate({height:100},"slow");
    $("div").animate({width:100},"slow");
  });
});
</script>
</head>

<body>
<button>Start Animation</button>
<br /><br />
<div style="background:#f0f0f0;height:100px;width:100px;position:relative">
</div>
</body>
</html>

Syntax:2

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:"100px"},"slow");
    $("div").animate({fontSize:"3em"},"slow");
  });
});
</script> 

Example:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:"100px"},"slow");
    $("div").animate({fontSize:"3em"},"slow");
  });
});
</script>
</head>
<body>

<button>Start Animation</button>
<br /><br />
<div style="background:#98bf21;height:100px;width:200px;position:relative">HELLO</div>
</body>
</html>
 

jQuery Effects

Here are some examples of effect functions in jQuery:

Function
Description
$(selector).hide()
Hide selected elements
$(selector).show()
Show selected elements
$(selector).toggle()
Toggle (between hide and show) selected elements
$(selector).slideDown()
Slide-down (show) selected elements
$(selector).slideUp()
Slide-up (hide) selected elements
$(selector).slideToggle()
Toggle slide-up and slide-down of selected elements
$(selector).fadeIn()
Fade in selected elements
$(selector).fadeOut()
Fade out selected elements
$(selector).fadeTo()
Fade out selected elements to a given opacity
$(selector).animate()
Run a custom animation on selected elements

 

Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)