Click here to Skip to main content
13,091,363 members (51,540 online)
Click here to Skip to main content
Add your own
alternative version


4 bookmarked
Posted 27 Apr 2011

Animation using jQuery

, 29 Apr 2011
Rate this:
Please Sign up or sign in to vote.
jQuery supports the full range of visual effects and animation. These effects can give your Web pages a very professional and dynamic appearance.

Animation by jQuery

jQuery supports the full range of visual effects and animation. These effects can give your Web pages a very professional and dynamic appearance.

Show & Hide

show() and hide() functions, which you use to show and hide page elements. toggle() function lets you alternate between page elements.

Fade In & Fade Out

You can make page elements fade out and fade in by using fadeOut() and fadeIn() functions. You can also fade an element only partially by using fadeTo() function.

SlideUp & SlideDown

The slideUp() function lets you slide page elements up, moving them from visible to can make elements slide down using slideDown() function. You can toggle elements, sliding them up and down with the slideToggle() function.

Set Duration

You can set the duration of the transition in milliseconds like show(2000), hide(1000), toggle(1500),fadeOut(1000), fadeIn(2000), slideUp(1000), slideDown(1000), slideToggle(1500).

Code Source and View Output

Code Block

<title>Animation by jQuery</title>
<script src="jquery-1.5.min.js"></script>
<style type="text/css">
table {background-color:#aaaaaa;border:solid 1px #000000;}
#td1 {font-weight:bold;color:#ffffff;height:310px;width:405px;border:solid 1px #ffffff;}
div {font-weight:bold;color:#ffffff;height:300px;width:400px;border:solid 1px #ffffff;}
<script type="text/javascript">
function loadImage() {$("#divScreen").css("background-image","url('rose11.jpg')");}	  
function showImage() {$("#divScreen").show();}	  
function hideImage() {$("#divScreen").hide();}	  
function toggleImage() {$("#divScreen").toggle();}	  
function fadeinImage() {$("#divScreen").fadeIn();}	  
function fadeoutImage() {$("#divScreen").fadeOut();}	  
function fadetoinImage() {$("#divScreen").fadeTo(1000,1.00);}	  
function fadetooutImage() {$("#divScreen").fadeTo(1000,0.25);}	  
function slideupImage() {$("#divScreen").slideUp();}	  
function slidedownImage() {$("#divScreen").slideDown();}	  
function slidetoggleImage() {$("#divScreen").slideToggle();}	  
<table width="415px">
<tr><td id="td1" colspan="3" align="center"> 
<div id="divScreen">Animation using jQuery</div>
<tr><td colspan="3">Effects
<input type = "button" value="Load Image"  önclick="loadImage()"></input>
<tr><td colspan="3">Show/Hide:
<input type = "button" value="Hide"  önclick="hideImage()"> </input>
<input type = "button" value="Show"  önclick="showImage()"></input>
<input type = "button" value="Toggle"  önclick="toggleImage()"> </input>
<tr><td colspan="3">Fade:
<input type = "button" value="Fade Out"  önclick="fadeoutImage()"> </input>
<input type = "button" value="Fade In"  önclick="fadeinImage()"></input>
<input type = "button" value="Fade Out"  önclick="fadetooutImage()"> </input>
<input type = "button" value="Fade In"  önclick="fadetoinImage()"> </input>
<tr><td colspan="3">Slide:
<input type = "button" value="Slide Up"  önclick="slideupImage()"></input>
<input type = "button" value="Slide Down"  önclick="slidedownImage()"> </input>
<input type = "button" value="Slide Toggle"  önclick="slidetoggleImage()"> </input>


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

R S Dodiya
Technical Lead Wipro Ltd.
India India

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170813.1 | Last Updated 29 Apr 2011
Article Copyright 2011 by R S Dodiya
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid