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:
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> <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> <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
Posts
