jQuery -

Slide

The jQuery .slideDown(), .slideUp(), and .slideToggle() methods allow you to create smooth slide effects for your elements. This tutorial covers different aspects of using these methods with detailed explanations, examples, and useful tips.

1. Basic Slide Down

You can use the .slideDown() method to slide down an element.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .slideDown() Method - Basic</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideDownButton").click(function(){
                $("div").slideDown();
            });
        });
    </script>
</head>
<body>
    <div style="display:none; background-color: yellow; padding: 10px;">This is a div element.</div>
    <button id="slideDownButton">Slide Down Div</button>
</body>
</html>

This example demonstrates how to slide down a div when a button is clicked using the .slideDown() method.

2. Basic Slide Up

You can use the .slideUp() method to slide up an element.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .slideUp() Method - Basic</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideUpButton").click(function(){
                $("div").slideUp();
            });
        });
    </script>
</head>
<body>
    <div style="background-color: yellow; padding: 10px;">This is a div element.</div>
    <button id="slideUpButton">Slide Up Div</button>
</body>
</html>

This example shows how to slide up a div when a button is clicked using the .slideUp() method.

3. Slide Toggle

You can use the .slideToggle() method to toggle between sliding up and sliding down an element.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .slideToggle() Method</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideToggleButton").click(function(){
                $("div").slideToggle();
            });
        });
    </script>
    <style>
        div {
            background-color: yellow;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div>This is a div.</div>
    <button id="slideToggleButton">Slide Toggle</button>
</body>
</html>

This example demonstrates how to toggle the slide effect on a div using the .slideToggle() method.

4. Slide Down with Duration

You can specify the duration for the slide down effect to make the transition smoother.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .slideDown() Method - Duration</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideDownButton").click(function(){
                $("div").slideDown(1000);
            });
        });
    </script>
</head>
<body>
    <div style="display:none; background-color: yellow; padding: 10px;">This is a div element.</div>
    <button id="slideDownButton">Slide Down Div with Duration</button>
</body>
</html>

This example shows how to slide down a div with a specified duration.

5. Slide Up with Duration

You can specify the duration for the slide up effect to make the transition smoother.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .slideUp() Method - Duration</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideUpButton").click(function(){
                $("div").slideUp(1000);
            });
        });
    </script>
</head>
<body>
    <div style="background-color: yellow; padding: 10px;">This is a div element.</div>
    <button id="slideUpButton">Slide Up Div with Duration</button>
</body>
</html>

This example demonstrates how to slide up a div with a specified duration.

6. Slide Toggle with Duration

You can specify the duration for the slide toggle effect to make the transition smoother.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .slideToggle() Method - Duration</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideToggleButton").click(function(){
                $("div").slideToggle(1000);
            });
        });
    </script>
</head>
<body>
    <div style="background-color: yellow; padding: 10px;">This is a div element.</div>
    <button id="slideToggleButton">Toggle Slide Div with Duration</button>
</body>
</html>

This example demonstrates how to toggle the slide effect on a div with a specified duration.

7. Slide Down with Callback

You can execute a callback function after the slide down effect is completed.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .slideDown() Method - Callback</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideDownButton").click(function(){
                $("div").slideDown("slow", function(){
                    alert("The div is now visible.");
                });
            });
        });
    </script>
</head>
<body>
    <div style="display:none; background-color: yellow; padding: 10px;">This is a div element.</div>
    <button id="slideDownButton">Slide Down Div with Callback</button>
</body>
</html>

This example demonstrates how to execute a callback function after sliding down an element.

8. Slide Up with Callback

You can execute a callback function after the slide up effect is completed.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .slideUp() Method - Callback</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideUpButton").click(function(){
                $("div").slideUp("slow", function(){
                    alert("The div is now hidden.");
                });
            });
        });
    </script>
</head>
<body>
    <div style="background-color: yellow; padding: 10px;">This is a div element.</div>
    <button id="slideUpButton">Slide Up Div with Callback</button>
</body>
</html>

This example shows how to execute a callback function after sliding up an element.

9. Slide Toggle with Callback

You can execute a callback function after the slide toggle effect is completed.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .slideToggle() Method - Callback</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideToggleButton").click(function(){
                $("div").slideToggle("slow", function(){
                    alert("The div has been toggled.");
                });
            });
        });
    </script>
</head>
<body>
    <div style="background-color: yellow; padding: 10px;">This is a div element.</div>
    <button id="slideToggleButton">Toggle Slide Div with Callback</button>
</body>
</html>

This example demonstrates how to execute a callback function after toggling the slide effect on an element.

10. Slide Down on Hover

You can use the .hover() method to slide down elements when a user hovers over them.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .hover() Method - Slide Down</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div").hover(function(){
                $(this).slideDown();
            });
        });
    </script>
</head>
<body>
    <div style="display:none; background-color: yellow; padding: 10px;">Hover over this div to slide it down.</div>
</body>
</html>

This example demonstrates how to slide down an element when the user hovers over it.

11. Slide Up on Hover

You can use the .hover() method to slide up elements when a user hovers over them.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .hover() Method - Slide Up</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div").hover(function(){
                $(this).slideUp();
            });
        });
    </script>
</head>
<body>
    <div style="background-color: yellow; padding: 10px;">Hover over this div to slide it up.</div>
</body>
</html>

This example shows how to slide up an element when the user hovers over it.

12. Slide Toggle on Click

You can use the .click() method to toggle the slide effect on elements when a user clicks on them.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .click() Method - Slide Toggle</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("div").click(function(){
                $(this).slideToggle();
            });
        });
    </script>
</head>
<body>
    <div style="background-color: yellow; padding: 10px;">Click on this div to toggle its slide.</div>
</body>
</html>

This example demonstrates how to toggle the slide effect on an element when the user clicks on it.

13. Slide with Custom Speed

You can specify custom speeds for the slide effect using predefined speeds or milliseconds.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .slideToggle() Method - Custom Speed</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideToggleButton").click(function(){
                $("div").slideToggle(1500);
            });
        });
    </script>
</head>
<body>
    <div style="background-color: yellow; padding: 10px;">This is a div element.</div>
    <button id="slideToggleButton">Toggle Slide with Custom Speed</button>
</body>
</html>

This example shows how to slide an element with a custom speed.

14. Slide with Easing

You can use different easing functions to change the slide animation's acceleration.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .slideToggle() Method - Easing</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideToggleButton").click(function(){
                $("div").slideToggle("slow", "easeOutBounce");
            });
        });
    </script>
</head>
<body>
    <div style="background-color: yellow; padding: 10px;">This is a div element.</div>
    <button id="slideToggleButton">Toggle Slide with Easing</button>
</body>
</html>

This example demonstrates how to use an easing function with the .slideToggle() method.

15. Slide with Delay

You can delay the slide effect using the .delay() method before sliding the element.

Try yourself 
        
            <!DOCTYPE html>
<html>
<head>
    <title>jQuery .delay() Method - Slide</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideToggleButton").click(function(){
                $("div").delay(2000).slideToggle(1000);
            });
        });
    </script>
</head>
<body>
    <div style="background-color: yellow; padding: 10px;">This is a div element.</div>
    <button id="slideToggleButton">Toggle Slide with Delay</button>
</body>
</html>

This example demonstrates how to delay the slide effect before sliding an element.