Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to give a sliding effect(slide down and slide up) on a div using jquery.

    • 0
    • 3
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 116
    Comment on it

    We are using simple jquery to implement a slide down and slide up effect on a div. Also a little styling can be done using css and HTML.

    <html>
    <div id="divTest" style="width: 40px; height: 40px; display: none; background-color: #fff;"></div>
    <script type="text/javascript">
    $(function()
    {
            $("#divTest").slideDown(2000, function()
            {
                    $("#divTest").slideUp(3000);
            });
    });
    </script>
    </html>
    

    This a simple way to show animated effect on a div. In the above code snippet the callback function we have used will be called as soon as the slideDown() method is finished and then the slideUp() method is called.

    A more simpler method can be used to implement the similar effect using slideToggle() method.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: