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

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

阅读更多

最近比较闲,并且前段时间因为一个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

分享到:
评论

相关推荐

    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" ...

    基于jquery的slideDown和slideUp做手风琴

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

    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使用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()`函数允许你在一个元素上交替执行两个或多个功能,...

Global site tag (gtag.js) - Google Analytics