jQuery slide

jQuery sliding method can make elements slide up and down.

jQuery Sliding Method

With jQuery, you can create sliding effects on elements.

jQuery has the following sliding methods:

slideDown()
slideUp()
slideToggle()

jQuery slideDown() method

jQuery slideDown () method is used to slide the element down.

Syntax:

$(selector).slideDown(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function executed after the sliding is completed.

The following example demonstrates the slideDown() method:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#div1").click(function(){
                $("#div2").slideDown("slow");
            });
        });
    </script>
    <style type="text/css">
        #div2,#div1
        {
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #div2
        {
            padding:50px;
            display:none;
        }
    </style>
</head>
<body>
<div id="div1">点我滑下面板</div>
<div id="div2">你好啊，美女/帅哥</div>
</body>
</html>

Run and try it

jQuery slideUp() method

jQuery slideUp() method is used to slide elements up.

Syntax:

$(selector).slideUp(speed,callback);

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function executed after the sliding is completed.

The following example demonstrates the slideUp() method:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#div1").click(function(){
    $("#div2").slideUp("slow");
  });
});
</script>
 
<style type="text/css"> 
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
}
</style>
</head>
<body>
 
<div id="div1">点我拉起面板</div>
<div id="div2">Hello world!</div>
</body>
</html>

Run it and try it

jQuery slideToggle() method

jQuery slideToggle() method can switch between slideDown() and slideUp() methods.

If elements slide down, slideToggle() slides them up.

If elements slide up, slideToggle() slides them down.

Syntax

$(selector).slideToggle(speed,callback);

Yes The selected speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function executed after the sliding is completed.

The following example demonstrates the slideToggle() method:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#div1").click(function(){
                $("#div2").slideToggle("slow");
            });
        });
    </script>
    <style type="text/css">
        #div2,#div1
        {
            padding:5px;
            text-align:center;
            background-color:#e5eecc;
            border:solid 1px #c3c3c3;
        }
        #div2
        {
            padding:50px;
            display:none;
        }
    </style>
</head>
<body>
<div id="div1">点我，显示或隐藏面板。</div>
<div id="div2">如果只是相遇，而不能相守，人生最好不相见</div>
</body>
</html>

Run and try it

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#div1").click(function(){ $("#div2").slideToggle("slow"); }); }); </script> <style type="text/css"> #div2,#div1 { padding:5px; text-align:center; background-color:#e5eecc; border:solid 1px #c3c3c3; } #div2 { padding:50px; display:none; } </style> </head> <body> <div id="div1">点我，显示或隐藏面板。</div> <div id="div2">如果只是相遇，而不能相守，人生最好不相见</div> </body> </html>

submit Reset Code

Automatic operation

jQuery slide

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]