JQuery Slide Effects

In the last tutorial we studied how to fade-in and fade-out elements using JQuery fadeIn() and fadeOut() functions. This article extends the last article and explains JQuery slide effects. There are three types of slide effects in JQuery: slideDown(), slideUp() and slideToggle(). This article touches the first two of them. The slideToggle() effect is just a combination of the first two.

JQuery Slide Down Effect

JQuery slideDown() function implements the sliding down effect on the element. The slideDown() function takes two optional parameters: speed and callback. Speed parameter defines the speed with which the element slides down on the page. it can take values like “slow”, “fast” or milliseconds. The callback is the function which executes when the slideDown() function completes its functionalities. We shall see call backs in the later sections. Take a look at this example.

<!DOCTYPE html>
<html>
<head>
    
    <title>Slide down Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $('.btn').click(function(){
           $('.box').slideDown(1000);
              
         });
           
         });
      </script>
    <style>
        
        .btn{
            background-color: #333;
            padding: 20px;
            text-align: center;
            color: white;
        }
        .box{
            background-color: cornflowerblue;
            color: white;
            text-align: center;
            padding: 40px;
            display: none;
        }
    </style>
</head>
    
<body>
    
    <div class="btn">Click to see slidedown in action.</div>
    <div class="box">Welcome to Knowledgehills</div>
    
    
</body>

</html>

Download Code
Run Code

The above code contains two divs elements with class btn and box. When the btn div is clicked an event is fired which is handled by JQuery click event. The click event executes a function which applies slide down effect on the div with class of “box”. When the page loads you will only see a black strip at the top. Clicking this strip will slide down a blue box via slideDown() function.

JQuery Slide Up Effect

The slideUp() function is similar to the slideDown() function. It takes two parameters speed and callback. take a look at the following example to see how we can slide up html elements.

<!DOCTYPE html>
<html>
<head>
    
    <title>Slide Up Effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    
    <script type = "text/javascript">
         $(document).ready(function() {
         $('.btn').click(function(){
           $('.box').slideUp(1000);
              
         });
           
         });
      </script>
    <style>
        
        .btn{
            background-color: #333;
            padding: 20px;
            text-align: center;
            color: white;
        }
        .box{
            background-color: cornflowerblue;
            color: white;
            text-align: center;
            padding: 40px;
        }
    </style>
</head>
    
<body>
    
    <div class="btn">Click to see slide up in action.</div>
    <div class="box">Welcome to Knowledgehills</div>
    
    
</body>

</html>

In the above code, clicking the black strip at the top will slide up the blue box.

Download Code
Run Code

<<< JQuery Fade EffectsJQuery Animations >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .