淡出动画fadeOut

让元素在页面不可见，常用的办法就是通过设置样式的display:none。除此之外还可以一些类似的办法可以达到这个目的。这里要提一个透明度的方法，设置元素透明度为0，可以让元素不可见，透明度的参数是0~1之间的值，通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。

fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果

所谓"淡出"隐藏的，元素是隐藏状态不对作任何改变，元素是可见的，则将其隐藏。

.fadeOut( [duration ] [, complete ] )

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数8被省略，那么默认使用400毫秒的延时

<!DOCTYPE html>
<html><head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>p{color:red;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head><body><h2>fadeOut</h2><p>测试文字淡入效果</p><p>慕课网,专注分享</p>淡出的隐藏效果：<select id="animation"><option value="1">fadeOut( )</option><option value="2">fadeOut( "slow" )</option><option value="3">fadeOut( 3000 )</option><option value="4">fadeOut( 1000, complete )</option><option value="5">fadeOut( 1000, "linear" )</option><option value="6">fadeOut( options )</option></select></br></br><input id="btnFadeOut" type="button" value="点击淡出隐藏" /><input id="btnShow" type="button" value="显示" /><script type="text/javascript">//【显示】按钮$("#btnShow").click(function() {$("p").show();});//【隐藏】按钮$("#btnFadeOut").click(function() {var v = $("#animation").val();if (v == "1") {$("p").fadeOut();} else if (v == "2") {$("p").fadeOut("slow");} else if (v == "3") {$("p").fadeOut(3000);} else if (v == "4") {$("p").fadeOut(2000, function() {alert("隐藏完毕!");});} else if (v == "5") {$("p").fadeOut(1000, "linear");} else if (v == "6") {$("p").fadeOut({duration: 1000});}});</script>
</body></html>

淡出动画fadeOut相关推荐

JQuery动画之淡入淡出动画
1. 淡入动画 1.1 不带参数的淡入动画格式: $(selector).fadeIn(); 示例代码: <!doctype html> <html lang="en&q ...
Android开发笔记（十五）淡入淡出动画TransitionDrawable
说到淡入淡出动画,可能大家会想到补间动画里面的AlphaAnimation,不过这个深浅动画只能对透明度做渐变效果,也就是只能对一个图形做深浅的颜色变换.如果我们想要从A图片逐渐变为B图片,也就是要实 ...
【jQuery笔记Part2】04-jQuery淡入淡出动画右下角广告案例
jQuery淡入淡出动画-右下角广告 CSS display 属性淡入淡出动画案例 jQuery笔记目录 CSS display 属性 display 属性规定元素应该生成的框的类型. 值描述 n ...
android淡入淡出动画_在Android中淡入动画示例
android淡入淡出动画 1) XML File: activity_main 1)XML文件:activity_main <?xml version="1.0" enco ...
android Animation 动画。淡出动画
淡出动画 protected void startHotelNearByIconAnim() {AlphaAnimation alphaAnimation = new AlphaAnimation(1 ...
android动画鸿阳,18. Activity淡入淡出动画
本篇文章属于鸿洋大神博客学习笔记,鸿洋博客地址:http://blog.csdn.NET/lmj623565791/article/details/22990643 前言多数情况下,我们新建的And ...
【转】WPF 窗体淡入淡出动画
[转]WPF 窗体淡入淡出动画第一种 <Window.Triggers><EventTrigger RoutedEvent="Window.Loaded" &g ...
Android App开发动画特效中帧动画和电影淡入淡出动画的讲解及实战（附源码和演示视频简单易懂）
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.帧动画 Android的动画分为三类,帧动画,补间动画和属性动画.其中帧动画是实现原理最简单的一种,跟现实生活中的电影胶卷类似,都是在短时间内连续 ...
小程序 · Animation——淡入淡出动画效果
淡入淡出动画效果主要原理是通过控制透明度显示. WXML <view class="add-tip" animation=&quo ...
android淡入淡出动画循环,Android应用开发之淡入淡出、缩放、旋转、平移、组合动画效果代码实现...
本文将带你了解Android应用开发Android动画开发之淡入淡出.缩放.旋转.平移.组合动画效果代码实现,希望本文对大家学Android有所帮助. 1.activity_main.xml文件 an ...

淡出动画fadeOut

淡出动画fadeOut相关推荐

最新文章

热门文章