jQuery 滑动方法slideDown向下滑动元素

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown() 向下滑动元素
slideUp()向上滑动元素
slideToggle()在 slideDown() 与 slideUp() 方法之间进行切换。

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。
语法：

$(selector).slideDown(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

赞 (0)

相关推荐

  • jQuery中slideUp()方法用法分析

    本文实例讲述了jQuery中slideUp()方法用法.分享给大家供大家参考.具体分析如下: 此方法通过高度变化(向上减小)来动态地隐藏所有匹配的元素,并且隐藏完成后还可以地触发一个回调函数. slideUp()方法只调整元素的高度,可以使匹配的元素以"滑动"方式隐藏起来. 一.语法结构: 此方法可以规定动画效果持续时间,如果没有规定时间则使用默认值normal.例如: 复制代码 代码如下: $("div").slideUp(5000) 以上代码可以设置动画效果在5

  • jQuery中slidedown与slideup方法用法示例

    这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • jQuery动画效果-slideUp slideDown上下滑动示例代码

    复制代码 代码如下: [code] <html> <head> <meta charset="utf-8"/> <style> *{ margin:0; padding:0;} body{font-size:15px;} #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;} .head{ background:#999; padding

  • jquery使用slideDown实现模块缓慢拉出效果的方法

    本文实例讲述了jquery使用slideDown实现模块缓慢拉出效果的方法.分享给大家供大家参考.具体分析如下: 下面的JS代码通过按钮控制指定的区域缓慢拉出显示的效果 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip

  • 基于jquery的slideDown和slideUp做手风琴

    手风琴 *{ padding:0; margin:0; } body{ background:#fafafa; font-size:12px; } .slider{ line-height:24px; width:700px; color:#7ecef4; margin:10px auto; background:#010e16; } .slider dt{ background:#f5f5d2; padding-left:30px; cursor:pointer; overflow:hidde

  • jQuery使用slideUp方法实现控制元素缓慢收起

    本文实例讲述了jQuery使用slideUp方法实现控制元素缓慢收起功能的技巧.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#flip").click(function()

  • jQuery中slideUp 和 slideDown 的点击事件

    先贴代码,再讲详细事件 复制代码 代码如下: <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title></title>         <script src="js/jquery.js"></script>     </head>     <styl

  • jQuery 滑动方法slideDown向下滑动元素

    jQuery 滑动方法 通过 jQuery,您可以在元素上创建滑动效果. jQuery 拥有以下滑动方法: slideDown() 向下滑动元素 slideUp()向上滑动元素 slideToggle()在 slideDown() 与 slideUp() 方法之间进行切换. jQuery slideDown() 方法 jQuery slideDown() 方法用于向下滑动元素. 语法: $(selector).slideDown(speed,callback); 可选的 speed 参数规定效果

  • 使用jquery prev()方法找到同级的前一个元素

    检索每个段落,找到类名为 "selected" 的前一个同胞元素: $("p").prev(".selected") .prev() 方法允许我们在 DOM 树中搜索这些元素的前一个同胞元素,并用匹配元素构造一个新的 jQuery 对象. .prev()方法找到的是当前元素的同级的前一个元素

  • 基于jQuery实现的向下滑动二级菜单效果代码

    基于jQuery实现的向下滑动二级菜单效果代码

    本文实例讲述了基于jQuery实现的向下滑动二级菜单效果代码.分享给大家供大家参考.具体如下: 这是一款使用jQuery制作向下滑动的二级菜单,本二级菜单带有动画效果,而且比较流畅,鼠标放在一级菜单上,就可以向下滑出二级子菜单,相对实用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-down-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD

  • js实现鼠标感应向下滑动隐藏菜单的方法

    本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>隐藏在网页左上角感应鼠标向下滑出的隐藏菜单</title> <style>#D1 {     BACKGROUND-COLOR: blue;     BORDER-BOTTOM: white 2px outset;     BORDER-LEFT: white 2px outset;   

  • jquery实现图片轮播和滑动效果

    jquery实现图片轮播和滑动效果

    本文实例为大家分享了jquery实现图片轮播和滑动效果的具体代码,供大家参考,具体内容如下 实习做了一个简易的图片轮播效果 下图是做出来的效果 源码 html 和 js部分 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link type="text/css" rel="sty

  • 基于jquery实现百度新闻导航菜单滑动动画

    基于jquery实现百度新闻导航菜单滑动动画

    本文实例为大家分享jquery实现百度新闻导航菜单滑动动画,供大家参考,具体内容如下 思路与步骤 1.利用UL创建简单横向导航: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

  • jQuery使用unlock.js插件实现滑动解锁

    unlock.js插件具有以下特点: 滑动解锁. 尺寸.颜色.字体大小等都可以个性化定制. 完成解锁后会有回调函数,用来触发进一步的数据处理. 如何使用 1. 首先在页面中引入unlock.css和unlock.js文件. <link href="css/unlock.css" rel="external nofollow" rel="stylesheet"> <script src='js/unlock.js'><

  • jquery实现标题字体变换的滑动门菜单效果

    jquery实现标题字体变换的滑动门菜单效果

    本文实例讲述了jquery实现标题字体变换的滑动门菜单效果.分享给大家供大家参考.具体如下: 这里使用jquery字体会变大的网页滑动门菜单,当把鼠标放在"门"上的时候,门内的菜单字体会变大变色,对应的内容同时切换,不知如何形容本效果,所以就叫字体会变的滑动门吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-font-cha-tab-menu-style-codes/ 具体代码如下: <!DOCTYPE html

  • 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示      源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,

  • 基于JavaScript实现鼠标向下滑动加载div的代码

    废话不多说了,关键代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new

随机推荐