jQuery Tutorial

jQuery Get()/Post() Methods jQuery load() Method Introduction to AJAX jQuery CSS() Method jQuery CSS Classes jQuery Remove jQuery Add Getting and setting content Introduction to DOM manipulation jQuery Stop Effect jQuery Animation Effect jQuery Sliding Effect jQuery Fading Effect jQuery hide/show Effect jQuery Document/Window Events jQuery Form Events jQuery Keyboard Events jQuery Mouse Events jQuery Events jQuery Selectors jQuery Example jQuery Syntax How to use jQuery jQuery Introduction jQuery Tutorial jQuery each() method

jQuery Sliding Effect
2018-06-27 11:11:07

jQuery Sliding Effect

jQuery slide is used to slides the element out of the viewport. Here are some slide methods:

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

jQuery slideDown()

slideDown() method of jQuery is used to slide down an element. Syntax:
  1. $(selector).slideDown(speed, callback);
speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds. callback: Callback is an optional parameter. It represents a function to be executed after the completion of the slideDown() method.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>   
$(document).ready(function(){  
    $("#flip").click(function(){  
        $("#panel").slideDown("slow");  
    });  
});  
</script>   
<style>   
#panel, #flip {  
    padding: 5px;  
    text-align: center;  
    background-color: #e5eecc;  
    border: solid 1px #c3c3c3;  
}   
#panel {  
    padding: 50px;  
    display: none;  
}  
</style>  

</head>  
<body>     
<div id="flip">Click here to slide the panel down</div>  
<div id="panel">Hi Friends!</div>  
</body>  
</html>
Try Now

jQuery slideUp()

jQuery slideUp() method is used to slide up an element. Syntax: 
$(selector).slideUp(speed, callback);
speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds. callback: Callback is an optional parameter. It represents a function to be executed after the completion of the slideUp() method.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>   
$(document).ready(function(){  
    $("#flip").click(function(){  
        $("#panel").slideUp("slow");  
    });  
});  
</script>     
<style>   
#panel, #flip {  
    padding: 5px;  
    text-align: center;  
    background-color: #e5eecc;  
    border: solid 1px #c3c3c3;  
}   
#panel {  
    padding: 50px;  
}  
</style>  
</head>  
<body>    
<div id="flip">Click to here to slide the panel up</div>  
<div id="panel">Hi Friends!</div>   
</body>  
</html>
Try Now

jQuery slideToggle() Method

The jQuery slidetoggle() method is used to make toggle between the slideUp() and slideDown() method. If the element is slide down, slideToggle() will slide them up and if they are slide up, slideToggle() will slide them down. Syntax: 
$(selector).slideUp(speed, callback);
speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds. callback: Callback is an optional parameter. It represents a function to be executed after the completion of the slideToggle() method.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>   
$(document).ready(function(){  
    $("#flip").click(function(){  
        $("#panel").slideToggle("slow");  
    });  
});  
</script>   
<style>   
#panel, #flip {  
    padding: 5px;  
    text-align: center;  
    background-color: #e5eecc;  
    border: solid 1px #c3c3c3;  
}   
#panel {  
    padding: 50px;  
    display: none;  
}  
</style>  
</head>  
<body>    
<div id="flip">Click here to slide the panel up and down</div>  
<div id="panel">Hi Friends!</div>   
</body>  
</html>
Try Now