首页技术文章正文

jQuery动画的显示与隐藏效果

更新时间:2021-07-19 来源:黑马程序员 浏览量:

IT培训班

jQuery中用于控制元素显示和隐藏效果的方法如表1所示。

表1 控制元素的显示和隐藏

方法说明
show([speed,[easing],[fn]])                             显示隐藏的匹配元素                                       
hide([speed,[easing],[fn]])隐藏显示的匹配元素
toggle([speed],[easing],[ fn])元素显示与隐藏切换

在表1中,参数speed表示动画的速度,可设置为动画时长的毫秒值(如1000),或预定的3种速度(slow、fast和normal);参数easing表示切换效果,默认效果为swing,还可以使用linear效果;参数fn表示在动画完成时执行的函数。

下面通过代码演示show()、hide()和toggle()的简单使用。

   <style>
    div { width: 150px; height: 300px; background-color: pink; }
   </style>
   <button>显示</button>
   <button>隐藏</button>
   <button>切换</button>
   <div></div>
   <script>
    $("button").eq(0).click(function() {
    $("div").show(1000, function() {
     alert("已显示");
    });
   });
   $("button").eq(1).click(function() {
    $("div").hide(1000, function() {
     alert("已隐藏");
    });
   });
   $("button").eq(2).click(function() {
    $("div").toggle(1000);
   });
  </script>

上述代码中,第2行设置div元素的样式宽度150px,高度300px,背景色pink。第4~6行分别定义功能按钮,第7行定义div元素,第9~13行给页面中的第1个按钮绑定单击事件,实现单击“显示”按钮控制div元素的显示,第14~18行给页面中的第2个按钮绑定单击事件,实现单击“隐藏”按钮控制div元素的隐藏,第19~21行给页面中的第3个按钮绑定单击事件,实现单击“切换”按钮控制div元素的显示和隐藏。

在浏览器中运行,效果如图1所示。

jQuery动画

图1 案例效果








猜你喜欢:

jquery教程视频百度云下载【黑马程序员】

如何获取jQuery?jQuery的使用演示

什么是jQuery对象?

写出jQuery链式调用实现方法【前端面试题】

黑马程序员前端高手班培训

分享到:
在线咨询 我要报名