fadein和fadeto_jQuery fadeIn，fadeOut，fadeTo

fadein和fadeto

jQuery provides an easy way to implement transparency effect in HTML through fadeIn(), fadeOut() and fadeTo() functions.

jQuery提供了一种简单的方法，可以通过fadeIn() ， fadeOut()和fadeTo()函数在HTML中实现透明效果。

jQuery淡入淡出 (jQuery fadeIn fadeOut)

Using jQuery for transparency effect solves cross browser issues and we can use it for any DOM elements like div, text or html.

使用jQuery透明效果可以解决跨浏览器的问题，我们可以将其用于div，text或html等任何DOM元素。

jQuery fadeOut() function is used for implementing disappearing effect. jQuery fadeIn() function is used to reverse it back to original. jQuery fadeTo() is used to achieve different percentage of transparency.

jQuery fadeOut（）函数用于实现消失效果。 jQuery fadeIn（）函数用于将其恢复为原始状态。 jQuery fadeTo（）用于实现不同百分比的透明度。

jQuery fadeIn，fadeOut，fadeTo示例 (jQuery fadeIn, fadeOut, fadeTo example)

Here is a sample HTML page showing jQuery fadeIn, fadeOut and fadeTo usage.

这是一个示例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><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 togglingfunction 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>

jQuery fadeIn，fadeOut，fadeTo –自己尝试 (jQuery fadeIn, fadeOut, fadeTo – Try it Yourself)

演示地址

翻译自: https://www.journaldev.com/1010/jquery-fadein-fadeout-fadeto

fadein和fadeto