jQuery效果之滑动

最新推荐文章于 2023-10-17 20:45:40 发布

bboyjoe

最新推荐文章于 2023-10-17 20:45:40 发布

阅读量1.9k

点赞数

分类专栏： jQuery 文章标签：前端 jquery

本文链接：https://blog.csdn.net/bboyjoe/article/details/47385363

版权

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

.slideUp([duration][,complete])——目标元素向上滑入隐藏；

.slideDown([duration][,complete])——目标元素向下滑出显示；

.slideToggle([duration][,complete])——目标元素隐藏则向下滑出显示，否则向上滑入隐藏；

注：duration为方法执行的时间区间，complete为回调函数。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>滑动效果</title>
    <script src="js/jquery-2.1.3.min.js"></script>
    <script src="js/slide.js"></script>
    <style>
        img{
            width:500px;
        }
    </style>
</head>
<body>
<div>
    <div>
        <button id="btn1">向上划入隐藏</button>
        <button id="btn2">向下滑出显示</button>
        <button id="btn3">向上划入隐藏/向下滑出显示</button>
    </div>
    <img src="images/2.jpg"/>
</div>

</body>
</html>

slide.js代码：

/*滑动效果*/
$(document).ready(function(){
    //向上滑入
    $('#btn1').click(function(){
        $('img').slideUp(2000);
    });
    //向下滑出
    $('#btn2').click(function(){
        $('img').slideDown(2000);
    });
    //切换滑动
    $('#btn3').click(function(){
        $('img').slideToggle(2000);
    });
})

bboyjoe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery效果之滑动

.slideUp([duration][,complete])——目标元素向上滑入隐藏；.slideDown([duration][,complete])——目标元素向下滑出显示；.slideToggle([duration][,complete])——目标元素隐藏则向下滑出显示，否则向上滑入隐藏；注：duration为方法执行的时间区间，complete为回调函数。
复制链接

扫一扫