Click here to Skip to main content
Click here to Skip to main content

Animation using jQuery

, 29 Apr 2011 CPOL
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 invisible.you 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

<html>
<head>
<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;}
</style>
<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();}	  
</script>
</head>
<body>
<table width="415px">
<tr><td id="td1" colspan="3" align="center"> 
<div id="divScreen">Animation using jQuery</div>
</td></tr>
<tr><td colspan="3">Effects
<input type = "button" value="Load Image"  önclick="loadImage()"></input>
</td></tr>
<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>
</td></tr>
<tr><td colspan="3">Fade:
<input type = "button" value="Fade Out"  önclick="fadeoutImage()"> </input>
<input type = "button" value="Fade In"  önclick="fadeinImage()"></input>
Partially
<input type = "button" value="Fade Out"  önclick="fadetooutImage()"> </input>
<input type = "button" value="Fade In"  önclick="fadetoinImage()"> </input>
</td></tr>
<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>
</td></tr>
</table>
</body>
</html>

License

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

Share

About the Author

R S Dodiya
Software Developer (Senior)
India India

Comments and Discussions

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