当前位置:首页 > 编程教程 > jQuery技术文章 > jQuery中slidedown与slideup方法用法示例

jQuery中slidedown与slideup实例用法

  • 发布时间:
  • 作者:码农之家
  • 点击:181

这篇文章主要知识点是关于jQuery、slidedown、slideup、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript和jQuery实战手册
  • 类型:JavaScript大小:103 MB格式:PDF作者:大卫·索耶·麦克法兰德
立即下载

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程序设计有所帮助。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • 详细介绍jquery使用slideDown实现模块缓慢拉出效果的方法技巧
  • 本文实例讲述了jquery使用slideDown实现模块缓慢拉出效果的方法。分享给大家供大家参考。具体分析如下: 下面的JS代码通过按钮控制指定的区域缓慢拉出显示的效果 !DOCTYPE htmlhtmlheadscript src=js/jquery.min.js/scriptscript$(document).ready(function(){ $(#flip).click(function(){ $(#panel).slideDown(slow); });});/scriptstyle type=text/css#panel,#flip{padding:5px;text-align:center;background-color:#e5eecc;border:solid 1px #c3c3c3;}#panel{paddi……

  • jQuery实现弹出带遮罩层并居中浮动窗口的实例
  • 本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果。分享给大家供大家参考,具体如下: !doctype htmlhtml lang=enheadmeta charset=UTF-8titlepop window/titlestyle*{ padding: 0; margin: 0;}.hide{ display: none;}.popWindow{ width: 300px; height: 300px; background: #abcdef; padding: 2px; margin: 10px; position: absolute; left: 0; top: 0; z-index: 2;}.popWindow h3{ height: 30px; line-height: 30px;}.popWindow h3 span{ float: right; font-size: 14px; font-weight……

  • 用jQuery实现异步通信(用json传值)方法步骤
  • jQuery是时下比较流行的一个js库,能够用简单的代码做出理想的效果,就像官网上说的那样write less ,do more。Jquery在一定程度上改写了以往对JavaScript的写法,本人就用jquery实现上篇中用ajax实现异步通信的效果,感受一下jquery的魅力。 首先你需要下载jquery的最新的js文件,并将其引入到文件中,你也可以在此下载:点我下载。 这次通信用的是jquery的jQuery.post(url, [data] , [callback] , [typ……

  • Jquery节点遍历next与nextAll的实例方法
  • Jqeruy节点遍历 !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 script src=Jquery/jquery-1.10.2.min.js type=text/javascript/script script type=text/javascript //节点遍历 /*--next()方法用于获取节点之后挨着它的第一个同类同辈元素--*/ $(function () { /* $(div).click(function () { alert($(this).next(div).text()) //效果:当单击AA的时候会弹出……

  • jQuery中事件对象e的事件冒泡用法实例详解
  • 之前查手册的时候没有看到有事件对象这一概念,当时我想实现的是点击一个文本框出现一个下拉多选框,在文本框失去焦点是触发blur事件,从而使下拉框隐藏起来。但是当我要选择多选框是也会使它隐藏,就不能进行选择了,这让我很郁闷。查了一天的资料,终于在脱离了焦点这一块。在网上发现有一个事件冒泡的东西,发现通过点击可以实现我的这一功能。 e.stopPropagation()阻……

  • jquery选项卡鼠标延迟的插件实例代码详解
  • !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd html meta http-equiv=Content-Type content=text/html; charset=utf-8 / script type=text/javascript src=js/jquery-1.7.min.js/script head title选项卡插件制作/title style type=text/css *{margin: 0;padding: 0} .tab{width: 350px;margin: 100px auto;} .tabnav li{ list-style:none;cursor:pointer;float: left;width: 80px;border: 1px solid #ccc;border-radius: 5px;margin-right: 5px; height:24px;line-height: ……

    jQuery 相关电子书
    学习笔记

    Copyright 2018-2020 xz577.com 码农之家

    本站所有电子书资源不再提供下载地址,只分享来路

    版权投诉 / 书籍推广 / 赞助:QQ:520161757