jQuery淡入于淡出动画

最新推荐文章于 2024-03-10 18:19:17 发布
最新推荐文章于 2024-03-10 18:19:17 发布
阅读量1.1k 收藏 10
点赞数 4
分类专栏： javaweb学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43386754/article/details/86497874
版权

淡入与淡出

  • hide()和show()函数
    的动画都在不断的改变着大小,实际上这种做法非常的混乱,所以我们此时最好的做法是可以进行淡入与淡出的效果
    • 淡入操作:fadeIn(时间,function(){})
    • 淡出操作:fadeOut(事件,function(){})
    • 自己设置淡出操作fadeTo(事件,淡出率,function(){}),淡出率不超过1

淡出操作


<html>
<head>
	<meta charset="utf-8"/>
	<title>jQuery的动画函数</title>
	<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
	<link rel="style/sheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
		//设置层淡出操作
			$(myimg).fadeOut(5000,function(){
				$(this).fadeIn(5000)
			});
		});
	</script>
</head>
<body>
	<div id="myDiv">
		<img src="images/gd.jpg" id="myimg" width="500px"/>
	</div>
</body>
</html>

使用fadeTo()观察淡出率问题

		$(function(){
		//设置淡出率
			$(myimg).fadeTo(5000,0.3,function(){});
		});

在这里插入图片描述

  • 如果设置为0表示完全淡出,如果设置为1,表示不淡出.
  • 如果已经懂得了淡入于淡出的操作,可以实现一排按钮

利用淡入于淡出实现菜单的功能

<html>
<head>
	<meta charset="utf-8"/>
	<title>jQuery的动画函数</title>
	<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
	<link rel="style/sheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript">
		$(function(){
		//设置淡出率
			$("img").each(function(){
				$(this).on("mouseover",function(){
					$(this).fadeOut(200,function(){
						$(this).fadeIn(200);
					});
				});
			});
		});
	</script>
</head>
<body>
	<div id="myDiv">
		<img src="images/gd.jpg"  width="100px"/>
		<img src="images/gd.jpg"  width="100px"/>
		<img src="images/gd.jpg"  width="100px"/>
		<img src="images/gd.jpg"  width="100px"/>
		<img src="images/gd.jpg"  width="100px"/>
	</div>
</body>
</html>

在这里插入图片描述

{[("青椒盖饭")]}
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
jQuery淡入淡出文字动画特效.zip
05-23
jQuery淡入淡出文字动画特效基于jquery.easing.1.3.js、jquery.min.js等技术实现，可设置文字出现的文字动画效果，支持数十种文字动画效果，可设置文字动画运动时间等参数。
jQuery之淡入、淡出
06-16 388
总结：淡入是透明度从0到1，淡出是透明度1到0，淡入到多少就是设置哟古额to。
jQuery 效果 - 淡入淡出
unber的博客
05-19 89
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。可选的 callback 参数是 fading 完成后所执行的函数名称。可选的 callback 参数是 fading 完成后所执行的函数名称。可选的 callback 参数是 fading 完成后所执行的函数名称。可选的 callback 参数是该函数完成后所执行的函数名称。
jQuery动画效果---隐藏/显示，淡入淡出，滑动，动画
最新发布
I_am_shy的博客
03-10 429
jquery可以实现很多流畅的动画效果。可以用 animate() 方法来操作所有 几乎所有的CSS 属性
jQuery 效果 – 淡入淡出
m0_58492934的博客
07-22 1672
在jQuery中可以通过四个方法来实现元素的淡入淡出，这四个方法分别是fadeIn()、fadeOut()、fadeToggle()以及fadeTo()，本文通过实例来为你讲解如何在jQuery中使用这四个方法。
jQuery学习笔记（5）效果——淡入淡出
DTCloud
04-25 2140
文章目录jQuery fade方法fadeIn() 方法fadeOut() 方法fadeToggle() 方法fadeTo() 方法 jQuery fade方法 通过 jQuery中的几个fade方法，各位读者可以实现元素的淡入淡出效果。 jQuery中存在以下种4种 fade 方法： fadeIn() fadeOut() fadeToggle() fadeTo() fadeIn() 方法 该方法用于淡入已经隐藏的元素。 基本语法： $(selector).fadeIn(speed,callback);
jQuery淡入淡出多级下拉动画菜单.rar
10-01
非常实用的特效代码，可以完美运行，可以二次修改！
jQuery实现基本淡入淡出效果的方法详解
12-10
本文实例讲述了jQuery实现基本淡入淡出效果的方法。分享给大家供大家参考，具体如下： jQuery fadeIn()方法：用于淡入已隐藏的元素 jQuery fadeOut()方法：用于淡出可见的元素 <!DOCTYPE html> <html> &lt...
jQuery实现淡入淡出的模态框
12-29
本文实例为大家总结了jQuery淡入淡出模态框的使用方法，供大家参考，具体内容如下 HTML代码如下：固定格式就省略了 × 个人额度情况 自2017年1月1日00:00起，至2017年01月16日 24:00，您的个人额度如下：...
jQuery实现图片文字淡入淡出效果
01-19
本实例主要讲解了jquery仿新浪微博图片文字列表上下淡进淡出间歇上下滚动效果，分享给大家供大家参考，具体内容如下 1、效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2、实现原理 首先要设定div...
jQuery实现淡入淡出效果
12-15
用fadeIn、fadeOut、fadeToggle来实现淡入淡出。
如何使用jQuery实现淡入淡出效果
qq_42526440的博客
10-04 564
Query Fading 方法 通过 jQuery，您可以实现元素的淡入淡出效果。 jQuery 拥有下面四种 fade 方法： fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() 用于淡入已隐藏的元素。 语法： $(selector).fadeIn(speed,callback); 可选的 speed 参数规定效果的时长。它可以取以下...
jQuery之淡入与淡出
m0_74577714的博客
12-14 1177
在我们jQuery中为我们封装了很多好玩的方法，我为大家介绍一下淡入与淡出！我们需要配合事件来玩淡入淡出(1)参数都可以省略(2)speed:三种预定速度之一的字符串(“slow”“normal”or “fast”)或表示动画时长的毫秒数值(如:1000).(3)easing:(Optiona)用来指定切换效果，默认是“swing”，可用参数“linear”(4)fn:回调函数，在动画完成时执行的函数，每个元素执行一次(1)参数都可以省略。
jQuery 实现淡入淡出效果
ivenqin的博客
07-25 1408
上一节我们学习了如何实现元素的显示与隐藏，本节我们来学习如何实现元素的淡入淡出效果。 fadeIn()方法 fadeIn() 方法用于淡入已隐藏的元素。 语法如下所示： $(selector).fadeIn(speed,callback); speed：规定效果的时长，可选值有 slow、fast 或毫秒。 callback：是 fading 完成后所执行的函数名称。 示例： 例如当我们点击按钮时，将紫色正方形设置为淡入效果： <!DOCTYPE html> <html> &l
使用jQuery实现淡入淡出轮播图（含完整源码）
lzy_55的博客
09-04 666
使用jQuery实现这个效果其实很简单，先看效果：话不多说，直接上代码！
jQuery--效果【淡入/淡出】
张默的博客
09-10 175
jQuery Fading 方法 jQuery 拥有下面四种 fade 方法： fadeIn() fadeOut() fadeToggle() fadeTo( jQuery fadeIn() 方法 jQuery fadeIn() 用于淡入已隐藏的元素。 语法: $(selector).fadeIn(speed,callback); 可选的 speed 参数规定效果的时长。它可以取...
jQuery学习：内置动画 淡出/淡入 展开/收缩 显示/隐藏
weixin_47295886的博客
11-14 1005
fadeOut():慢慢淡出 改变透明度 opcity 1--0 然后显示display:none。fadeIn：淡入 display 0 --1 display block。速度的取值：slow normal fast 1000ms 取值。显示隐藏：默认没有动画--------这三个属性是东湖。toggle:（不）带动画的切换显示/隐藏。慢慢展开：slideDown 向下展开。show():（不）带动画的显示。hide():（不）带动画的隐藏。改变的有透明度 宽 高 --fadeOut(速度，)
jQuery-淡入淡出
qq_39111074的博客
10-11 193
淡入淡出，改变透明度 fadeIn()- - -淡入（显示） fadeOut()- - -淡出（消失） fadeToggle()- - -（显示消失切换） fadeTo()- - -改变透明度; fadeTo(动画时间，要变成的透明度)，透明度0~1 fadeTo使用示例 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=
jQuery卷轴实现动画淡入淡出
11-18
以下是使用jQuery实现卷轴动画淡入淡出的示例代码： HTML代码： ```html ``` CSS代码： ```css .scroll-container { position: relative; width: 600px; height: 400px; overflow: hidden...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值