上下滑动:slideDown   slideUp  slideToggle

     <style>
div {
width: 150px;
height: 300px;
background-color: pink;
display: none;
}
</style>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div> <script>
$(function () {
$("button").eq(0).click(function () {
$("div").slideDown(1000);
}) $("button").eq(1).click(function () {
$("div").slideUp(1000)
}) $("button").eq(2).click(function () {
$("div").slideToggle(1000)
})
})
</script>

8.jQuery之上下滑动效果的更多相关文章

  1. Jquery Mobile左右滑动效果

    首先在一个页面里面定义两个< div data-role="page">,这里为了突出重点,就没有写出footer和header.定义的页面如下: <body&g ...

  2. 两个完整的jquery slide多方面滑动效果实例

    实例1,需要引用jquery-ui.js <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  3. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  4. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jquery 实现导航栏滑动效果

    精简的代码实现导航栏滑动效果,实现详解: 1.滑块位置:通过父节点position=fixed,子节点position=absolute方式,实现子节点浮动: 2.导航栏居中:通过left=0px,r ...

  6. jquery的slideUp、slideDown、slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug

    jquery的slideUp.slideDown.slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug: 1. 因position引起的问题 影响:IE全系列 症状:在需要sl ...

  7. jquery 如何实现回顶部 带滑动效果

    $("#returnTop").click(function () { var speed=200;//滑动的速度 $('body,html').animate({ scrollT ...

  8. js进阶 13-2 jquery动画滑动效果哪些注意事项

    js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...

  9. Jquery实现特效滑动菜单栏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 「CF 961G」Partitions

    题目链接 戳我 \(Solution\) 首先,这个直接推式子.自己推去 所以我们来想一想一些巧妙的方法 \(|S|\sum w_i\) 可以转化为:划分好集合后,每个点都对当前点有\(w_i\)的贡 ...

  2. 分布式-信息方式-ActiveMQ结合Spring

    ActiveMQ结合 Spring开发■ Spring提供了对JMS的支持,需要添加 Spring支持jms的包,如下: <dependency> <groupId>org.a ...

  3. TCP 之 TCP首部

    TCP首部图 TCP首部说明 源端口,目的端口 用于寻找发送端和接收端应用进程.(源IP,源端口,目的IP,目的端口) 四元组确定唯一一个TCP连接:(IP,端口)也称为一个插口(socket): 序 ...

  4. Android HandlerThread与IntentService

    HandlerThread本质上是一个线程类,它继承了Thread: HandlerThread有自己的内部Looper对象,可以进行looper循环: 通过获取HandlerThread的loope ...

  5. android:layout_gravity 和 android:gravity 的区别?

    第一个是让该布局在其父控件中的布局方式,第二个是该布局布置其字对象的布局方式

  6. 【3】火狐中: radio被点击以后,重刷页面,不会选择默认的radio

    1.问题:火狐中radio (单选框)点击以后,重新刷新页面,不会选择默认的radio 解决:form表单中添加:autocomplete="off" autocomplete 属 ...

  7. 清除表单input输入框内数据

    清除表单input输入框内数据 1. $(':input','#addVoucherType') //'#addVoucherType'表单id .not(':button') .val('') .r ...

  8. I/O检测介绍

    I/O性能监测可总结如下:* 任何时间出现CPU等待IO,说明磁盘超载.* 计算出你的磁盘可维持的IOPS值.* 判定你的应用是属于随机磁盘访问型还是有序型.* 通过对比等待时间和服务时间即可判断磁盘 ...

  9. Fiddler抓取APP接口

    1.获取本机IP地址 2.打开手机设置无线连接(需要和电脑在同一局域网) 长按wifi连接修改无线连接 打开高级选项,设置主机名和端口后保存 3.设置Fiddler 从下图可以看出,抓到的全是HTTP ...

  10. Jmeter+Ant+Jenkins接口自动化持续集成环境搭建(Linux)

    一.安装说明 系统环境:CentOS release 6.4 JDK版本:jdk1.8.0_181 Jmeter版本:apache-jmeter-3.0 Ant版本:apache-ant-1.9.13 ...