jQuery动画的显示与隐藏效果！

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

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

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

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

<style>```python
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所示。

如果您对java技术非常感兴趣，可以关注小千，后期分享更多前端知识。本文来自千锋教育，转载请注明出处。

jQuery动画的显示与隐藏效果！相关推荐

jQuery动画的显示与隐藏效果
jQuery中用于控制元素显示和隐藏效果的方法如表1所示. 表1 控制元素的显示和隐藏在表1中,参数speed表示动画的速度,可设置为动画时长的毫秒值(如1000),或预定的3种速度(slow.fa ...
【jQuery动画】显示与隐藏效果
JQuery 动画滑动显示和隐藏方式 slideDown\slideUp\slideToggle
滑动显示和隐藏方式 slideDown([speed], [easing],[fn]) slideup( [ speed, [easing],[fn]]) slideToggle([speed], [ ...
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节查看作业目录需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果用户将光标移动到"最新动态页"或"帮助查询" ...
jQuery动画（显示隐藏，淡入淡出，滑动）
目录分类基本动画函数显示元素交替显示隐藏滑动效果向上收缩效果向下展开效果交替伸缩样式淡入淡出效果淡入效果淡出效果自定义不透明度 jQuery的动画函数分类基本动画函数:既有 ...
php下拉列表框是隐藏变色的代码,jQuery设置下拉框显示与隐藏效果的方法分析...
本文实例讲述了jQuery设置下拉框显示与隐藏效果的方法.分享给大家供大家参考,具体如下: jQuery的 hide() 和 show() 方法分别用来隐藏和显示 HTML 元素,而 toggle() ...
【JavaWeb】JQuery实现广告显示和隐藏动画效果
我们经常会看到几秒后出现了广告,显示了几秒后广告就消失了,下面就用JQuery框架来实现这个功能. 代码如下: <!DOCTYPE html> <html> <head& ...
jQuery 实现显示与隐藏效果
本节我们来学习如何使用 jQuery 中的方法来实现元素的显示与隐藏效. hide()方法 hide() 方法用于隐藏指定的元素,与 CSS 中的 display:none 效果类似. 语法如下所示: ...
jquery显示与隐藏效果
toggle方法可以动态让隐藏的元素显示,让显示的元素隐藏加粗样式从显示的变化来看得出以下结论: show方法和hide方法还有toggle方法,它们能动态地改变当前元素的高度.宽度和不透明度,决 ...

jQuery动画的显示与隐藏效果！

jQuery动画的显示与隐藏效果！相关推荐

最新文章

热门文章