jQuery特效

最新推荐文章于 2024-02-14 09:08:31 发布

极具浪漫主义色彩的菜鸟学习之路

最新推荐文章于 2024-02-14 09:08:31 发布

阅读量551

点赞数

分类专栏： javaScript 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/muweichang/article/details/126763745

版权

javaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

每篇博客的浪漫主义

感到孤独时就去天空之城追太阳吧，日落会陪你一起燃烧

这篇文章的学习笔记来自
在这里插入图片描述

jQuery特效

隐藏和显示 jQuery hide() 和 show()

jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
在这里插入图片描述
语法：

实例1：

实例2：

在这里插入图片描述
实列3：

例子4：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".ex .hide").click(function(){
    $(this).parents(".ex").hide("slow");
  });
});
</script>
<style type="text/css"> 
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
 
<body>

<h3>中国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人：张先生<br /> 
北三环中路 100 号<br />
北京</p>
</div>

<h3>美国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人：David<br /> 
第五大街 200 号<br />
纽约</p>
</div>

</body>
</html>

在这里插入图片描述

jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：
在这里插入图片描述

效果 - 淡入淡出

jQuery Fading 方法

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

在这里插入图片描述

1.jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

在这里插入图片描述

2.jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法：

在这里插入图片描述

在这里插入图片描述
3.jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

语法：
在这里插入图片描述

4.jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

语法：

在这里插入图片描述

效果 - 滑动

jQuery 滑动方法

通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。
在这里插入图片描述

在这里插入图片描述
运行结果：

在这里插入图片描述
Query slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

在这里插入图片描述

jQuery slideToggle() 方法

在这里插入图片描述

效果 - 动画

jQuery 动画 - animate() 方法

在这里插入图片描述

jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=

在这里插入图片描述
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 “show”、“hide” 或 “toggle”：

实例
在这里插入图片描述
jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
在这里插入图片描述

jQuery stop() 方法

在这里插入图片描述

jQuery Chaining

通过 jQuery，您可以把动作/方法链接起来。

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

例子 1
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。“p1” 元素首先会变为红色，然后向上滑动，然后向下滑动：

在这里插入图片描述

对于这篇学习笔记就暂时到这了，兄弟们加油❤️🤣😂😊😘💕😍😒
从现在做起，坚持下去，一天进步一小点，不久的将来，你会感谢曾经努力的在这里插入代码片你！
👩‍🔧👨‍🔧🧑‍🔧

如果有出错的，请各位友友指正

极具浪漫主义色彩的菜鸟学习之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery特效

您甚至可以把属性的动画值设置为 “show”、“hide” 或 “toggle”：实例。隐藏和显示 jQuery hide() 和 show()效果 - 淡入淡出效果 - 滑动效果 - 动画jQuery stop() 方法jQuery Chaining
复制链接

扫一扫