jquery effect

最新推荐文章于 2023-04-12 08:27:10 发布

最新推荐文章于 2023-04-12 08:27:10 发布 · 222 阅读

文章标签：

#jQuery #ViewUI

jquery 专栏收录该内容

11 篇文章

订阅专栏

effect主要是控制页面元素显示或隐藏，以及动态出现效果等。

[b]basic[/b]
1.show( )
显示隐藏对象
2.show( speed, [callback] )
显示隐藏对象
可以指定显示的速度，速度有："slow", "normal", or "fast"；也可以填写数字，毫秒为单位
callback，是在显示完成之后执行的回调。
3.hide()
隐藏对象
4.hide(speed, [callback])
隐藏对象，可指定隐藏的速度，和一个callback
callback隐藏完成之后执行。
5.toogle()
在一组对象中切换显示和隐藏状态，切换到的对象显示，其他的则隐藏。


<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
  $(document).ready(function(){

    $("button").click(function () {
      $("p").toggle();
    });

  });
  </script>
</head>
<body>
  <button>Toggle</button>
  <p>Hello</p>
  <p style="display: none">Good Bye</p>
</body>

[b]sliding[/b]滑动效果
slideDown( speed, [callback] )
改变对象的height，以实现向下展开动画效果，用于展现；并在动画结束时可以指定一个callback执行。
slideUp( speed, [callback] )
改变对象的height，实现向上收起的动画效果，用于隐藏；指定callback在动画结束执行


   $(document.body).click(function () {
      if ($("div:first").is(":hidden")) {
        $("div").show("slow");
      } else {
        $("div").slideUp();
      }
    });

slideToggle( speed, [callback] )
用toggle来切换对象时而展开时而收起的效果，好比是一个开关一会用于下拉显示，一会又上拉隐藏。

[b]Fading:[/b]淡入淡出效果
fadeIn( speed, [callback] )
淡出，慢慢出现
fadeOut( speed, [callback] )
淡入，慢慢消失