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

jquery事件练习

2012-03-27 20:12 330 查看

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

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

标签：

相关文章推荐

新的分享

章节导航