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

最新推荐文章于 2024-04-17 10:01:59 发布

在奋斗的大道

最新推荐文章于 2024-04-17 10:01:59 发布

阅读量562

点赞数

分类专栏： Jquery学习笔记

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/18262339

版权

Jquery学习笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

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();
});

在奋斗的大道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 入门教程(7): 滑动效果

jQuery支持使用下面方法来实现HTML元素的滑动效果：slideDown()slideUp()slideToggle()slideDown方法用来实现向下滑动动画效果，其基本语法为：$(selector).slideDown(speed,callback);可选参数speed给出了淡入效果的时间，可以使用 “slow”,”fast” 或是数值（微秒）第二个可
复制链接

扫一扫

专栏目录