Home Ajax Jquery Sliding elements example

Related Tutorials


 
 

Share on Google+Share on Google+

Sliding elements example

Advertisement
Sliding elements example

Sliding elements example

     

Sliding elements example

For sliding effect jQuery has following methods :

.slideDown( )

This method display the matched elements with a sliding effect.

Example :

Image is initially hidden, we can show it slowly :

$('#clickme').click(function() {
  $('#imageNew').slideDown('slow', function() {
  // Animation complete.
  });
});

.slideToggle( )

This method is used to display or hide the matched element with sliding effect.

.slideUp( )

This method is used to hide the element with sliding effect.

Example(for slideToggle & slideUp) :

In the below example, when you click on given button, a window opens .And if you again click on this button, it hides window. This window also contain a '[x]' button. When you click on it, it hides the window also. This window displays because the button click fires 'slideToggle' event, which slide up the window.

slideToggle.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>JQuery Collapse</title>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function()
{

$("#click_here").click(function(event) {
event.preventDefault();
$("#div1").slideToggle();
});

$("#div1 a").click(function(event) {
event.preventDefault();
$("#div1").slideUp();
});
});
</script>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666; 
}
a{color:#993300; text-decoration:none;}
#div1 {
width:30%;
display: none;
padding:5px;
border:2px solid #EFEFEF;
background-color:#7FFFD4;
}
#click_here{
padding:5px;
border:2px solid #FFEFEF;
background-color:#FF6347;
}
</style>
</head>
<body>
<input type="button" id="click_here" value="Click Here">
<div id="div1">
<a href="#" class="close">[x]</a>
<p>
This window displays because the button click
<br>fires slideToggle event,which slide up the window.
<br>CLICK ON [X] TO SLIDE UP/CLOSE THE WINDOW.
</p>
</div>
</body>
</html>

Output :

When we click on 'button', it displays :

If you again click button or [x] , it will displays :

Download Source Code

Click here to see online demo

Learn from experts! Attend jQuery Training classes.

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Related Tutorials

Discuss: Sliding elements example  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0
DMCA.com