信鸽网

jquery (show,fadeOut,Animate)简单效果

  作者：bea

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery</title> <style type


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery</title>
<style type="text/css"><!--
#spanel,#showHide,#fadeout
{
width:200px;
height:100px;
background-color:Aqua;
position:relative;
cursor:pointer;
font-size:12px;
}
--></style>
<script src="http://img./jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript"><!--


$(function(){
//用toggle,hide(),show()实现显示与隐藏
$("#showHide").toggle(function(){
$(this).hide(600)
},function()
{
$(this).show(600);
}
);
//使用fadeout,fadeIn改变透明度
$("#fadeout").toggle(function(){
$(this).fadeOut();
},function()
{
$(this).fadeIn();
}
);
//使用animate实现简单的动画效果
$("#spanel").bind("click",function(){
$(this).animate({left:"300px",height:"100px"},3000);
});
});

// --></script>
</head>
<body>
<div id="showHide">show移上去看看</div>
<p></p>
<div id="spanel">
<h5>hello</h5>

</div>
<p></p>
<div id="fadeout">fadeout淡出效果
淡出效果淡出效果淡出效果淡出效果淡出效果
淡出效果淡出效果淡出效果淡出效果
</div>
</body>
</html>




[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]



有用  |  无用

猜你喜欢

您可能感兴趣的文章: