<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" language="JavaScript" src="../include/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="JavaScript">
$(document).ready(function(){
$("#btn0").click(function(){
$("#toggl").toggle("slow");
});
$("#btn1").click(function(){
$("#toggl").slideToggle("slow");
});
$("#btn2").click(function(){
$("#toggl").fadeIn("slow");
});
$("#btn3").click(function(){
$("#toggl").fadeOut("slow");
});
$("#btn4").hover(function(){
$("#toggl").fadeOut("slow");
},function(){
$("#toggl").fadeIn("slow");
});
$("#btn5").toggle(function(){
//使用toggle
$("#toggl").toggle("slow");
},function(){
//滑动效果
$("#toggl").slideToggle("slow");
},function(){
//淡出
$("#toggl").fadeOut("slow");
},function(){
//淡入
$("#toggl").fadeIn("slow");
});
});
</script>
</head>
<body>
<div id="toggl" style="width:100px; height:80px; background-color:#95b3d7"></div>
<input type="button" id="btn0" value="显示/隐藏div">
<input type="button" id="btn1" value="div滑动效果">
<input type="button" id="btn2" value="div淡入">
<input type="button" id="btn3" value="div淡出">
<input type="button" id="btn4" value="使用hover事件执行淡入淡出">
<input type="button" id="btn5" value="toggle效果集合">
</body>
</html>
jquery事件练习
最新推荐文章于 2022-04-07 14:54:26 发布