masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

slaid jQuery

Kaedah gelongsor jQuery boleh membuat elemen meluncur ke atas dan ke bawah.

Kaedah Gelongsor jQuery

Dengan jQuery anda boleh mencipta kesan gelongsor pada elemen.

jQuery mempunyai kaedah gelongsor berikut:

  • slideDown()

  • slideUp()

  • slideToggle()

kaedah jQuery slideDown()

jQuery kaedah slideDown () digunakan untuk meluncurkan elemen ke bawah.

Sintaks:

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

Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.

Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas gelongsor selesai.

Contoh berikut menunjukkan kaedah slideDown() : 

<!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>

Jalankan dan cuba

kaedah jQuery slideUp()

kaedah jQuery slideUp() digunakan untuk meluncur elemen ke atas.

Sintaks:

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

Parameter kelajuan pilihan menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.

Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas gelongsor selesai.

Contoh berikut menunjukkan kaedah slideUp(): 

<!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>

Jalankan dan cuba

kaedah jQuery slideToggle()

kaedah jQuery slideToggle() boleh bertukar antara kaedah slideDown() dan slideUp().

Jika elemen meluncur ke bawah, slideToggle() meluncurkannya ke atas.

Jika elemen meluncur ke atas, slideToggle() meluncurkannya ke bawah.

Sintaks

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

Ya Parameter kelajuan yang dipilih menentukan tempoh kesan. Ia boleh mengambil nilai berikut: "perlahan", "cepat" atau milisaat.

Parameter panggil balik pilihan ialah nama fungsi yang akan dilaksanakan selepas gelongsor selesai.

Contoh berikut menunjukkan kaedah slideToggle(): 

<!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>

Jalankan dan cuba


Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492893 permainan