博客

jQuery slideUp()方法

  • Post category:jquery

jQuery的slideUp()方法可以让页面上的元素在垂直方向上以动画效果向上滑动，隐藏元素。这个方法的语法格式如下：

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

其中，selector参数表示需要进行slideUp操作的元素，可以是任意的CSS选择器；speed参数表示滑动的速度，可以是以下三个字符串值之一：”slow” (600毫秒)，”fast”（200毫秒）或者是以毫秒为单位的数字值（例如1000表示1秒）；callback参数表示滑动完成后执行的回调函数。

下面是两个示例说明。

示例1

在页面上添加一个按钮和一个p元素，在按钮点击时，使用slideUp()方法隐藏p元素。

HTML代码：

<button id="hide">隐藏</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in orci tellus. </p>

JavaScript代码：

$(document).ready(function(){
  $("#hide").click(function(){
    $("p").slideUp();
  });
});

在这个示例中，当按钮被点击时，slideUp()方法被调用，p元素会以默认速度向上滑动并隐藏。

示例2

在一个列表中，添加下拉收起效果。当列表项被点击时，隐藏和显示相邻的ul元素，使用slideUp()和slideDown()方法。

HTML代码：

<ul>
  <li>
    <h2>项目1</h2>
    <ul>
      <li>子项目1</li>
      <li>子项目2</li>
      <li>子项目3</li>
    </ul>
  </li>
  <li>
    <h2>项目2</h2>
    <ul>
      <li>子项目1</li>
      <li>子项目2</li>
    </ul>
  </li>
</ul>

JavaScript代码：

$(document).ready(function(){
  $("h2").click(function(){
    $(this).next("ul").slideToggle();
  });
});

在这个示例中，当h2元素被点击时，使用slideToggle()方法切换相邻的ul元素的显示和隐藏状态，从而实现下拉和收起的效果。

Tags: