`
newleague
  • 浏览: 1505395 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类

slideup()和slideDown()方法的使用

jQueryCSSJavaScriptXHTMLHTML 
阅读更多

最近比较闲，并且前段时间因为一个JQuery的问题卡的很是头疼，现在正好抽点功夫来学学JQuery。从helloworld的学习一直都觉得Jquery其实蛮好理解的，到slidedown()方法和slideUp()方法时，才看到这里有很多的方法都不知道是个什么意思，搞的一知半解的。baidu了一下，终于也明白个七八成了。现在把它写在这里，也是给遇到同样问题的朋友一个找答案的地方，虽然网上有很多，不过我自己写的终归是自己的，到时候再遇到同样的问题的时候我也不用到处乱找了，呵呵。先看一个我从中文入门教程上看到的例子：

　　<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery Starterkit</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function() {
   $('#faq').find('dd').css('color','red');　//这里是我添加的样式
   $('#faq').find('dd').hide().end().find('dt').click(function() {
      var answer = $(this).next();
    if (answer.is(':visible')) {
      answer.slideUp();
    } else {
     answer.slideDown();
    }
     });
  });
 </script>

</head>
<body>
<h1>jQuery </h1>
<div class="stuff">
 <h3>Bird FAQ - click the questions to show the answers</h3>
 <dl id="faq">
  <dt>问题 1</dt>
  <dd>问题 1 的答案</dd>

  <dt>问题 2</dt>
  <dd>问题 2 的答案</dd>
 
  <dt>问题 3</dt>
  <dd>问题 3的答案</dd>
 
  <dt>问题 4</dt>
  <dd>问题 4的答案</dd>
 </dl>

</div>

</body>
</html>

之前的疑问主要有：

　end() 、next()、slideUp()、slideDown() 四个方法。

在ready方法内：首先设置答案dd的字体样式为red。

然后用ID选择器 $('#faq') 获取到这个dl列表，然后find('dd')是去获取id为faq里的标签为dd的元素，调用hide()方法将其隐藏。这时候例子里调用了一个end()，返回到之前的faq对象，(这里可能会有点绕,

$('#faq') 此时对象为faq对象；

$('#faq').find('dd')此时的对象为dd

$('#faq').find('dd').end()此时又返回到faq元素.) 。接着获取dt的元素的onclick事件。在里面调用该对象的next()方法，就是调用当前的dd元素的下一个标签的内容，也就是该问题的答案咯。然后判断其样式，如果可见调用slideUp()将其隐藏，否则调用slideDown()方法显示。

第一次写这么多东西，没什么条理，多多包涵了各位！

 

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/mzygssk/archive/2010/05/25/5622476.aspx

分享到：
| 20100917
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery中slideUp 和 slideDown 的点击事件

    其中，slideUp 和 slideDown 是 jQuery 提供的两种动画方法，用于实现元素的高度变化，进而产生内容的展开或收起的效果。当我们想要通过点击事件来触发动画时，jQuery 的事件监听器就可以派上用场。 在给定的文件中...

    微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    怎样实现jq中的slideUp或者slideDown这种动画效果呢，我的思路是用css3的transform: translateY() 属性，给需要动画的元素添加上一个动画class。 先上效果图： 1.蒙层的结构： &lt;!-- 购物车蒙层 --&gt; ...

    让任意view具有滑动效果的SlideUp

    这样，你可以像使用普通布局一样添加和控制滑动视图，同时还能保持滑动效果的流畅性和一致性。 在实际项目中，你可能还需要考虑一些其他因素，例如动画的缓动函数（interpolator），这将决定动画的速度变化。例如，...

    slideUp_slideDown_slideToggle

    这通常涉及到JavaScript或jQuery中的几个关键函数，如`slideUp()`, `slideDown()` 和 `slideToggle()`。这些方法是jQuery库提供的强大功能，用于创建平滑的动画效果，使元素以滑动的方式显示或隐藏。在这篇文章中，...

    jQuery中slidedown与slideup方法用法示例

    这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法。分享给大家供大家参考，具体如下： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    es6-slide-up-down:用ES6编写的用于向上和向下滑动的Vanilla JavaScript微型函数-类似于jQuery slideUpdslideDown

    该行为等同于jQuerys的slideUp和slideDown方法。 它使用requestAnimationFrame并且没有外部依赖关系。 在此处查看演示： : 安装 yarn add es6-slide-up-down // or npm install es6-slide-up-down 用法 import { ...

    slideToggle+slideup实现手机端折叠菜单效果

    slideToggle+slideup实现手机端折叠菜单效果 ...使用slideToggle和slideup函数来实现手机端折叠菜单效果是一种简洁、方便和高效的方法。开发者可以根据自己的需求，选择合适的函数和样式来实现折叠菜单效果。

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

    在上述示例代码中，我们看到了如何使用jQuery的hover()方法来实现鼠标悬停和离开时触发不同的动画效果。hover()方法接受两个函数参数，第一个函数参数用于处理鼠标悬停事件（mouseenter），第二个函数参数用于处理...

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

    jQuery 拥有以下滑动方法： slideDown() 向下滑动元素 slideUp()向上滑动元素 slideToggle()在 slideDown() 与 slideUp() 方法之间进行切换。 jQuery slideDown() 方法 jQuery slideDown() 方法用于向下滑动元素。 ...

    一款jQuery实现的手风琴左侧导航菜单下载

    主要使用了jquery库的slideUp和slideDown方法，再配合华丽的样式就可以实现非常好看的手风琴滑动收缩菜单，可用于前后台左右侧导航菜单，好处在于不占据空间。Demo及在线演示效果：...

    基于jquery的slideDown和slideUp做手风琴

    代码开始部分引入了jQuery库文件，这是使用`slideDown()`和`slideUp()`等jQuery方法的前提条件。 2. **初始化变量和状态** 通过jQuery的`$(function(){...})`来确保DOM完全加载后再执行脚本。使用变量`flag`来...

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

    `slideUp()`方法常与`slideDown()`方法结合使用，以实现元素的展开和收起效果。 此外，`slideUp()`方法还可以与其他jQuery动画方法结合，如`fadeIn()`和`fadeOut()`，创建更复杂的视觉效果。同时，可以使用`stop()`...

    微信小程序实现点击空白隐藏的方法示例

    怎样实现jq中的slideUp或者slideDown这种动画效果呢，我的思路是用css3的transform: translateY（）属性，给需要动画的元素添加上一个动画class。 先上效果图： 1.蒙层的结构： &lt;!-- 购物车蒙层 --&gt; ...

    dom-slider：jQuery的slideToggle（），slideDown（）和slideUp（）的纯JavaScript版本，但不使用display：无

    它的工作方式类似于jQuery的slideToggle（），slideDown（）和slideUp（），但不使用display：none。 使用CSS3过渡和element.scrollHeight设置高度未知的元素的高度的动画。 也是一回事。 特征： 滑动高度已知或...

    最简化的12种jquery特效

    - `slideUp()`和`slideDown()`用于元素的上下滑动效果，可以用来隐藏或显示元素。同样，它们也支持设置动画时间。 3. **切换显示/隐藏（Toggle）** - `toggle()`函数允许你在一个元素上交替执行两个或多个功能，...

Magicbox
Global site tag (gtag.js) - Google Analytics