jQuery中slidedown与slideup方法用法示例

更新时间：2016年09月16日 00:47:29 作者：永远爱好写程序

这篇文章主要介绍了jQuery中slidedown与slideup方法用法,结合实例形式分析了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/xhtml">
<head>
  <title></title>
  <style type="text/css">
    *{font-size:12px;}
    div{width:600px;margin:auto;}
    #control{background-color:gold;padding:10px;margin-bottom:10px;}
  </style>
  <script src="../js/jquery-1.5.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $("#btnslideDown").click(function () {
        $("#message").slideDown(1000);
      });
      $("#btnslideUp").click(function () {
        $("#message").slideUp(1000);
      });
      //*****举例1
      //      $("#btnToggle").click(function () {
      //        $("#message").slideToggle(1000);
      //      });
      //*****举例2 动画函数都可以传递回调函数，即动画执行完毕后会执行这个函数
      $("#btnToggle").click(function () {
        $("#message").slideToggle(1000, function () {
          alert('我执行完毕了!');
        });
      });
    });
  </script>
</head>
<body>
  <div id="control">
    <input id="btnslideDown" type="button" value="展开div" />
    <input id="btnslideUp" type="button" value="收起div" />
    <input id="btnToggle" type="button" value="切换" />
  </div>
  <div id="message">
    mouseover、mouseenter的区别：div里套div。见备注。和事件冒泡有关系。<br /> 
    不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件 <br />
    只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件(穿过子元素不会触发)
  </div>
</body>
</html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

您可能感兴趣的文章:

jquery实现拖拽调整Div大小
这里给大家分享的是一段自己编写的使用jQuery实现拽调整Div层大小的代码，非常实用，推荐给有需要的小伙伴们。
2015-01-01
JQuery自定义模态框效果
这篇文章主要为大家详细介绍了JQuery自定义模态框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
jQuery三组基本动画与自定义动画操作实例总结
这篇文章主要介绍了jQuery三组基本动画与自定义动画操作,结合实例形式总结了jQuery基本动画函数与自定义动画相关操作技巧及使用注意事项,需要的朋友可以参考下
2020-05-05
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
这篇文章主要介绍了jQuery实现带右侧索引功能的通讯录,结合实例形式分析了jQuery针对页面元素动态遍历、排序等相关操作技巧,并附源码供读者下载参考,需要的朋友可以参考下
2018-04-04
jQuery满屏焦点图左右滚动特效代码分享
这篇文章主要介绍了jQuery满屏焦点图左右滚动特效，一段精致的焦点图轮播代码，有需要的小伙伴可以参考下。
2015-09-09
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
jQuery模拟百度新闻不间断滚动效果并且支持文字、图片水平垂直滚动等等，感兴趣的朋友可以了解下，或许本文所提供的案例对你学习jquery特效有所帮助,好了话不多说，切入正题
2013-02-02
jQuery动态加载css文件实现方法
使用jQuery来加载一个外部的 css 文件，首先创建一个 link 元素，并将它添加到标记中即可。那么基于jquery代码如何实现呢？下面小编给大家介绍jQuery动态加载css文件实现方法，需要的朋友参考下吧
2016-06-06
jQuery实现电梯导航案例详解(切换网页区域)
日常生活中用手机，电脑浏览网页时，滑到了页面下端后想返回顶部或跳转到页面别的版块，用鼠标滚动很麻烦，网页电梯导航就可以很方便的精准到达目标版块，本文给大家分享jquery电梯导航案例详解，感兴趣的朋友一起看看吧
2022-05-05
jQuery学习笔记之 Ajax操作篇（二） - 数据传递
在前一篇介绍 jQuery Ajax 的数据加载中的例子都是从静态的文件中取得数据，而 Ajax 更大的价值在于与后端服务器进行数据传递，动态地请求和发送数据。
2014-06-06
jquery垂直公告滚动实现代码
公告滚动想必大家都有见到过吧，实现方法也有很多，下面为大家介绍使用jquery实现垂直公告滚动，感兴趣的朋友不要错过
2013-12-12

jQuery中slidedown与slideup方法用法示例

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具