现在位置首页 / 前端开发 /正文

jquery slide使用demo

作者: IT小兵 | 2015年8月10日| 热度:℃ | 评论: |参与:

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

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

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

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

预览地址:

http://bbbzd.com/code/slide/ 


html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>滑动效果</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.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/1.jpg"/>
</div>
</body>
</html>

js代码:

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


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询