jQuery 入门教程(7): 滑动效果

虾米姐阅读：598 2021-04-01 10:01:47 评论：0

jQuery支持使用下面方法来实现HTML元素的滑动效果：

slideDown()
slideUp()
slideToggle()

slideDown方法
用来实现向下滑动动画效果，其基本语法为：

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

可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个可选参数为回调函数，在slideDown()方法结束后调用。

下面例子点击按钮#panel 将采用下滑方式显示出来：

[html] view plain copy print ?

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#flip").click(function () {
$("#panel").slideDown("slow");
});
});
</script>
<style type="text/css">
#panel, #flip
{
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel
{
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>
</body>
</html>

<!DOCTYPE html> 
<html> 
<meta charset="utf-8"> 
<title>JQuery Demo</title> 
<script src="scripts/jquery-1.9.1.js"></script> 
<script> 
    $(document).ready(function () { 
        $("#flip").click(function () { 
            $("#panel").slideDown("slow"); 
        }); 
    }); 
</script> 
 
<style type="text/css"> 
    #panel, #flip 
    { 
        padding: 5px; 
        text-align: center; 
        background-color: #e5eecc; 
        border: solid 1px #c3c3c3; 
    } 
 
    #panel 
    { 
        padding: 50px; 
        display: none; 
    } 
</style> 
</head> 
<body> 
 
    <div id="flip">Click to slide down panel</div> 
    <div id="panel">Hello world!</div> 
 
</body> 
</html>

slideUp方法
用来实现向上滑动动画效果，其基本语法为：

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

可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个可选参数为回调函数，在slideUp()方法结束后调用。

[javascript] view plain copy print ?

$("#flip").click(function(){
$("#panel").slideUp();
});

$("#flip").click(function(){ 
  $("#panel").slideUp(); 
});

slideToggle方法
用来实现交替显示向上向下滑动动画效果，如果之前是下滑显示，slideToggle则显示slideUp(),反之显示slideDown
其基本语法为：

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

可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）
第二个可选参数为回调函数，在slideUp()方法结束后调用。

[javascript] view plain copy print ?

$("#flip").click(function(){
$("#panel").slideToggle();
});

标签:jquery

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。