jQuery写fadeTo示例代码

145 阅读 0 评论 96 点赞

我是靠谱客的博主冷酷大船，最近开发中收集的这篇文章主要介绍jQuery写fadeTo示例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<title></title> 
<style type="text/css"> 
.imgclass{ width:300px; height:300px; border:solid 1px red;} 
</style> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function () { 
$('#Button1').bind('click', function () { 
$('img').fadeOut(2000, function () { 
$('#Button1').val('哎，没了'); 
}); 
}) 
$('#Button2').bind('click', function () { 
$('img').fadeIn(2000, function () { 
$('#Button2').val('有了'); 
}); 
}) 
$('#Button3').bind('click', function () { 
$('img').fadeTo(2000, 0.3, function () { 
alert('动画执行完毕'); 
}); 
}) 
}) 
</script> 
</head> 
<body> 
<div> 
<div> 
<input id="Button1" type="button" value="淡出" /><input id="Button2" type="button" value="淡入" /><input id="Button3" type="button" value="指定透明度" /></div> 
<div><img src="images/1.jpg" class="imgclass"/></div> 
</div> 
</body> 