Follow this blog

Tuesday, March 24, 2009

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:




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

6 comments:

Anonymous said...

Nice article, thanks!

Blogger Tips And Tricks|Latest Tips For Bloggers said...

Useful Article for me.Thank you.For Latest blogger tips http://bloggertipandtrick.blogspot.com

Anonymous said...

Thanks for your resourceful article. go ahead and writer some more usefull article.
www.pcgeniuszone.blogspot.com

rascal said...

cool effects, sure try one in my page.

maverickbashoo said...

dude this is way coooll cooollla articalooooo

aqib shahzad said...

nice atricle http://igoteverynews.blogspot.com/ check out this blog also and see it's look