jquery小小动画练习
MoveDrow.html-------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jslib/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jslib/moveDrow.js"></script>
</head>
<body>
<div id="divV" style="display:none;width:300px;height:200px;background:blue;border:1px solid red;">我是DIV</div>
<p style="display:none;">hello</p>
<div id="divV2" style="width:300px;height:200px;background:yellow;border:1px solid red;">我是DIV2</div>
</body>
</html>
-------------------------------
MoveDrow.js
--------------
$(function (){
/* $("#divV").show(4000,function(){
$(this).text("sdkjfldksjfsdklfjldk...");
}).hide(4000).show("show",function(){
$(this).css("background","#999").css("border","2px dashed blue");
});*/
//$("#divV").toggle("fast",function(){alert(1);});
// $("#divV").toggle(false);
// $("#divV").toggle(1===1);
// $("#divV").show().slideUp(4000).slideDown("slow").slideToggle(5000);
// $("#divV").show().fadeOut("slow").fadeIn(4000,function(){alert(1);});
//$("#divV").animate({width:"900px",height:"200",border:'3px dashed yellow'},5000,"swing",function(){alert(1);}) ;
// $("#divV2").animate({width:"900px",height:"200",border:'3px dashed yellow'},5000,"swing",function(){alert(1);}) ;
// $("#divV").click(function (){$(this).stop()});
//===============================加强 =================================
//-----------------循环显示隐藏
//fun();
/* function fun(){
$("#divV").show(4000,function(){
$(this).hide(4000,fun)
});
}*/
/* function fun(){
$("#divV").show(4000).hide(4000,fun)
}*/
//--------------------------------------------
//fx("fadeIn","fadeOut");
//fx("show","hide");
fx("slideUp","slideDown");
function fx(f1,f2) {
$("#divV")[f1](1000,function(){
$("#divV")[f2](1000,function(){
fx(f1,f2);
});
});
}
//=====================================================================
// $(document).click(function(){fun3();});
fun3();
function fun3(){
$("#divV2").slideToggle("slow",function (){fun3();});
}
$(document).click(function(){
$(":animated").stop(); //:animated表示选择所有正在进行动画的元素，
});
});
