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 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>

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

演示地址

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

fadein和fadeto

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值