您的位置：首页 > Web前端 > JQuery

Jquery fadeOut淡出 fadeIn 淡入 fadeTo指定透明度

2013-05-06 19:53 447 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航