jQuery sliding effect – slideUp, slideDown, slideToggle

jQuery slideDown, slideUp, slideToggle can be used to display, hide or toggle and element in sliding motion.

.slideDown( [duration ] [, complete_callback ] )
.slideDown( [duration ] [, easing ] [, complete_callback ] )
.slideDown( options )
.slideUp( [duration ] [, complete_callback ] )
.slideUp( [duration ] [, easing ] [, complete_callback ] )
.slideUp( options )
.slideToggle( [duration ] [, complete_callback ] )
.slideToggle( [duration ] [, easing ] [, complete_callback ] )
.slideToggle( options )

Example – slideDown

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div style="display:none;background-color:lightblue;margin:10px;" id="slide1">Hello</div>
<button onclick="clickHander()">Click to slide down hidden element</button>

<script type="text/javascript">
function clickHander() {
  $("#slide1").slideDown();
}
</script>
refresh

Example – slideDown with more options

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div style="display:none;background-color:lightblue;margin:10px;" id="slide1">Hello</div>
<button onclick="clickHander()">Click to slide down hidden element</button>
<div id="log"></div>

<script type="text/javascript">
function clickHander() {
  $("#slide1").slideDown(1000, "swing", function() { $("#log").append("Done")});
}
</script>
refresh

Example – slideUp

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div style="background-color:lightblue;margin:10px;" id="slide1">Hello</div>
<button onclick="clickHander()">Click to slide up element</button>

<script type="text/javascript">
function clickHander() {
  $("#slide1").slideUp();
}
</script>
refresh

Example – slideToggle

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div style="background-color:lightblue;margin:10px;" id="slide1">Hello</div>
<button onclick="clickHander()">Click to slide toggle element</button>

<script type="text/javascript">
function clickHander() {
  $("#slide1").slideToggle();
}
</script>
refresh
Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments