本文介绍了一个使用jQuery实现元素淡入淡出效果的具体案例，包括HTML结构、CSS样式及JavaScript交互代码。通过按钮点击触发div元素的淡入淡出动画，并结合了多个动画效果进行串联。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
<script src="js/jq/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
// 淡入淡出 opacity
// $("#div1").fadeIn();
// $("#div1").fadeOut();
// $("#div1").fadeToggle("slow");
// $("#div1").fadeTo(1000,0.3,function(){
// alert("fade to callback");
// });
$("#div1").fadeOut(1000).fadeIn(1000).fadeTo(1000,0.3,function(){
alert("chaining");
});
})
})
</script>
</head>
<body>
<div id="div1">222</div>
<input type="button" name="btn" id="btn" value="淡入淡出" />
</body>
</html>
扫一扫
639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
