联系我们
简单又实用的WordPress网站制作教学
当前位置:网站首页 > 网页前端技术 > 正文

jQuery写fadeTo示例代码 - Web前端

作者:98wpeu发布时间:2026-10-13分类:网页前端技术浏览:5


导读:复制代码代码如下:<title></title><styletype="text/CSS">.imgclass{width:300px...
复制代码 代码如下:
<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>

标签:示例代码WebfadeTojQuery


网页前端技术排行
最近发表
网站分类
标签列表