Tuesday , January 24 2017
Home / jquery / JQuery Sliding Effect Example Tutorial

JQuery Sliding Effect Example Tutorial

JQuery Sliding effects are used to show or hide an elements in a web page. It is done through adjustment of height, width, margin and opacity.

By having these adjustments, we can slide any div top to bottom or bottom to top. We have three different methods to slide an element in html page.

  • slideDown()
  • slideUp()
  • slideToggle()

JQuery Sliding – slideDown() :

slideDown() is a method in JQuery. It is used to make all matched elements are sliding down.

$(selector).slideDown(speed, callback);  

The parameter speed represents three speeds. They are fast, slow and normal. It runs in few milliseconds. Callback represents the execution of function after animation completes.

slideDown() Example :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>slideDown demo</title>
  <style>
  div {
    background: #027d3a;
    margin: 3px;
    width: 80px;
    height: 40px;
    display: none;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
Click me!
<div></div>
<div></div>
<div></div>
 
<script>
$( document.body ).click(function () {
  if ( $( "div:first" ).is( ":hidden" ) ) {
    $( "div" ).slideDown( "slow" );
  } else {
    $( "div" ).hide();
  }
});
</script>
 
</body>
</html>

JQuery Sliding – slideUp() :

slideUp() is a method in JQuery. It is used to make all matched elements are sliding up.

$(selector).slideUp(speed, callback);  

The parameter speed represents three speeds. They are fast, slow and normal. It runs in few milliseconds. Callback represents the execution of function after animation completes.

slideUp() Example :

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title>slideToggle demo</title> 
  <style> 
  p { 
    width: 400px; 
  } 
  </style> 
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 
  
<button>SlideUp</button> 
<p> 
  Just abserve carefully, new we are going to 
  <i>slide up</i> this paragraph. 
</p> 
  
<script> 
$( "button" ).click(function() { 
  $( "p" ).slideUp( "slow" ); 
}); 
</script> 
  
</body> 
</html>

JQuery Sliding – slideToggle()

Toggle method is a method in JQuery, it is used to toggle between the slideUp() and the slideDown() elements. Initially the element is slide down, then the element will be hidden and vice versa.

The only advantage of slideToggle() method is, it can maintain the state of the event. We don’t bother about the state, whether the element is in slideUp or slideDown state.

$(selector).slideToggle(speed,callback);

The parameter speed represents three speeds. They are fast, slow and normal. It runs in few milliseconds. Callback represents the execution of function after animation completes.

slideToggle() Example :

<!doctype html> 
<html lang="en"> 
<head> 
  <meta charset="utf-8"> 
  <title>slideToggle demo</title> 
  <style> 
  p { 
    width: 400px; 
  } 
  </style> 
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 
  
<button>Toggle</button> 
<p>
Just observe carefully, now we are going to 
  <em>Toggling</em> this paragraph.
</p>
<script> 
$( "button" ).click(function() { 
  $( "p" ).slideToggle( "slow" ); 
}); 
</script> 
  
</body> 
</html>

Happy Learning 🙂

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Check Also

JQuery Remove Elements Example

In this tutorial we  are going to understand JQuery Remove Elements. Remove Elements in JQuery …

Leave a Reply

Your email address will not be published. Required fields are marked *