jQuery fadeIn，fadeOut，fadeTo
时间：2020-02-23 14:46:08 来源:igfitidea点击:
jQuery提供了一种简单的方法，可以通过fadeIn()，fadeOut()和fadeTo()函数在HTML中实现透明效果。
jQuery淡入淡出
使用jQuery透明效果可以解决跨浏览器的问题，我们可以将其用于div，text或者html等任何DOM元素。
jQuery fadeOut()函数用于实现消失效果。
jQuery fadeIn()函数用于将其恢复为原始状态。
jQuery fadeTo()用于实现不同百分比的透明度。
jQuery fadeIn，fadeOut，fadeTo示例
这是一个示例HTML页面，显示了jQuery fadeIn，fadeOut和fadeTo用法。
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<title>jQuery fadeIn fadeOut Effect Example</TITLE>
<style>
body,input {
font-family: Helvetica, Arial;
}
#fade, #fadeTo {
width: 150px;
height: 50px;
padding: 10px;
border: 1px solid black;
background-color: yellow;
}
</style>
</head>
<body>
<input type="button" value="Fade Out" onclick="fadeToggle('fade', this)"
<br>
<div id="fade">Demo Text in div for fadeIn, fadeOut example</div>
<br>
<input type="button" value="FadeTo 50%" onclick="fadeToToggle('fadeTo', this)"
<div id="fadeTo">Demo Text in div for fadeTo example</div>
</body>
<script>
//javascript function for fade effect toggling
function fadeToggle(div_id, button) {
if (button.value == 'Fade Out') {
$('#' + div_id).fadeOut('slow');
button.value = 'Fade In';
} else {
$('#' + div_id).fadeIn(2000);
button.value = 'Fade Out';
}
}
function fadeToToggle(div_id, button) {
if (button.value == 'FadeTo 50%') {
$('#' + div_id).fadeTo('slow' , 0.5);
button.value = 'FadeTo 100%';
} else {
$('#' + div_id).fadeTo(4000 , 1.0);
button.value = 'FadeTo 50%';
}
}
</script>
</html>
