jQuery 效果 - 淡入淡出fadeIn()、fadeOut、fadeTo、fadeToggle()示例

fadeIn():通过将它们淡入淡出来显示匹配的元素。

<!DOCTYPE HTML>
<html lang="en">
<head><meta charset="utf-8"><title>fadeIn demo</title><style>p {position: relative;width: 400px;height: 90px;}div {position: absolute;width: 400px;height: 65px;font-size: 36px;text-align: center;color: yellow;background: red;padding-top: 25px;top: 0;left: 0;display: none;}span {display: none;}</style><script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body><p>Let it be known that the party of the first partand the party of the second part are henceforthand hereto directed to assess the allegationsfor factual correctness... (<a href="#">click!</a>)<div><span>CENSORED!</span></div>
</p><script>
$( "a" ).click(function() {$( "div" ).fadeIn( 3000, function() {$( "span" ).fadeIn( 100 );});return false;
});
</script></body>
</html>

fadeOut:通过将它们淡化为透明来隐藏匹配的元素。

<!DOCTYPE HTML>
<html lang="en">
<head><meta charset="utf-8"><title>fadeOut demo</title><style>.box,button {float: left;margin: 5px 10px 5px 0;}.box {height: 80px;width: 80px;background: #090;}#log {clear: left;}</style><script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body><button id="btn1">fade out</button>
<button id="btn2">show</button><div id="log"></div><div id="box1" class="box">linear</div>
<div id="box2" class="box">swing</div><script>
$( "#btn1" ).click(function() {function complete() {$( "<div>" ).text( this.id ).appendTo( "#log" );}$( "#box1" ).fadeOut( 1600, "linear", complete );$( "#box2" ).fadeOut( 1600, complete );
});$( "#btn2" ).click(function() {$( "div" ).show();$( "#log" ).empty();
});
</script>
</body>
</html>

fadeTo：调整匹配元素的不透明度。

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>fadeTo demo</title><style>div, p {width: 80px;height: 40px;top: 0;margin: 0;position: absolute;padding-top: 8px;}p {background: #fcc;text-align: center;}div {background: blue;}</style><script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body><p>Wrong</p>
<div></div>
<p>Wrong</p>
<div></div>
<p>Right!</p>
<div></div><script>
var getPos = function( n ) {return (Math.floor( n ) * 90) + "px";
};
$( "p" ).each(function( n ) {var r = Math.floor( Math.random() * 3 );var tmp = $( this ).text();$( this ).text( $( "p:eq(" + r + ")" ).text() );$( "p:eq(" + r + ")" ).text( tmp );$( this ).css( "left", getPos( n ) );
});
$( "div" ).each(function( n ) {$( this ).css( "left", getPos( n ) );}).css( "cursor", "pointer" ).click( function() {$( this ).fadeTo( 250, 0.25, function() {$( this ).css( "cursor", "" ).prev().css({"font-weight": "bolder","font-style": "italic"});});});
</script></body>
</html>

fadeToggle：通过动画化不透明度来显示或隐藏匹配的元素。

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>fadeToggle demo</title><script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body><button>fadeToggle p1</button>
<button>fadeToggle p2</button>
<p>This paragraph has a slow, linear fade.</p>
<p>This paragraph has a fast animation.</p>
<div id="log"></div><script>
$( "button:first" ).click(function() {$( "p:first" ).fadeToggle( "slow", "linear" );
});
$( "button:last" ).click(function() {$( "p:last" ).fadeToggle( "fast", function() {$( "#log" ).append( "<div>finished</div>" );});
});
</script></body>
</html>

jQuery 效果 - 淡入淡出fadeIn()、fadeOut、fadeTo、fadeToggle()示例相关推荐

jQuery淡入淡出fadeIn() fadeOut() fadeToggle() fadeTo()
通过 jQuery,您可以实现元素的淡入淡出效果. jQuery 拥有下面四种 fade 方法: fadeIn() fadeOut() fadeToggle() fadeTo() 1,jQuery f ...
jQuery 效果 - 淡入淡出
效果附上: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
jQuery 效果 – 淡入淡出
在jQuery中可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn().fadeOut().fadeToggle() 以及 fadeTo(),本文通过实例来为你讲解如何在jQuery ...
jQuery学习教程五：jQuery 效果 - 淡入淡出, Fading 方法
实例 jQuery fadeIn() 演示 jQuery fadeIn() 方法. <!DOCTYPE html> <html> <head> <script ...
播放器实现声音效果淡入淡出
目录 1.前言 2.基本代码 3.延伸思考问题 4.开始播放-淡入 5.停止播放-淡出 6.完整基本代码修改 1.前言由于切歌会有爆破音的问题.方案有很多,比如音频合成淡入淡出fadein,fade ...
jquery动画效果 animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡出
jquery动画效果今天给大家介绍一下jQuery当中的几种动画效果. . animate() 自定义动画 stop() 停止运行动画 fadeIn()/fadeOut()/fadeTo() 淡入淡 ...
jquery的淡入,淡出事件 fadeIn fadeOut
jquery的淡入,淡出事件 fadeIn fadeOut 1. fadeIn() 方法使用淡入效果来显示被选元素,(该元素是隐藏的) $(selector).fadeIn(speed,callb ...
原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
jQuery 实现淡入淡出效果
上一节我们学习了如何实现元素的显示与隐藏,本节我们来学习如何实现元素的淡入淡出效果. fadeIn()方法 fadeIn() 方法用于淡入已隐藏的元素. 语法如下所示: $(selector).fad ...

jQuery 效果 - 淡入淡出fadeIn()、fadeOut、fadeTo、fadeToggle()示例

jQuery 效果 - 淡入淡出fadeIn()、fadeOut、fadeTo、fadeToggle()示例相关推荐

最新文章

热门文章