How to make Sliding Effect in JQuery ?

This is the Easy way to How to make Sliding Effect in JQuery ?, jQuery Tutorial for slideUp(), slideDown() and slideToggle(), Sliding Animation Tutorial, How to Make Sliding effect in JQuery.
This is the Complete code for Sliding Effect in JQuery. You have to Copy this code and Paste in Your HTML Document and Include the JQuery file in this Doc and Learn Easily Slidingup(), SlidingDown(), SlidingToggle() Effect in JQuery.

<!DOCTYPE html>
<html>
    <head>
        <style>
            .flip1,.flip2,.flip3{
                padding:10px;
                text-align:center;
                background-color:#dadada;
                border:1xp solid #a5a5a5;
                margin-top:40px
            }
            .panel1,.panel2,.panel3{
                padding:50px;
                text-align:center;
                background-color:#dadada;
                border:1px solid #a5a5a5;
            }
            
            .panel2{
                display:none;
            }
            
        
        </style>
    </head>
<body>

    <h1>Sliding Effect in JQuery</h1>

    <h2>Slideup Effect</h2>
    <div class="flip1">Slide Up</div>
    <div class="panel1">This is Content</div>
    
    <h2>Slide Down Effect</h2>
    <div class="flip2">Slide Down</div>
    <div class="panel2">This is Content</div>
    
    <h2>Slide Toggle Effect</h2>
    <div class="flip3">Slide Toggle</div>
    <div class="panel3">This is Content</div>
    
    
    <!-- Include Jquery -->
    <script src="jquery.min.js"></script>
    <script>
        
        $(document).ready(function(){
            $('.flip1').click(function(){
                $('.panel1').slideUp();         
            })
            
            $('.flip2').click(function(){
                $('.panel2').slideDown();           
            })
            
            $('.flip3').click(function(){
                $('.panel3').slideToggle();         
            })
        
        })
        
        
        
    
    </script>
</body>
</html>

Sliding is the Inbuilt Function of JQuery. For More Detail Watch this Video.

Leave a Reply

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