码迷,mamicode.com
首页 > Web开发 > 详细

jQuery效果之滑动

时间:2015-08-10 01:58:53      阅读:156      评论:0      收藏: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);
    });
})

技术分享

版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery效果之滑动

标签:

原文地址:http://blog.csdn.net/bboyjoe/article/details/47385363

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!