简单jQuery效果

最新推荐文章于 2025-09-10 09:07:54 发布

转载最新推荐文章于 2025-09-10 09:07:54 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/getpro/archive/2011/12/30/2306891.html

文章标签：

#javascript #ViewUI

简单jQuery效果

HTML

<html>
<head>
<title></title>
<script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript"> 
var start_flag=0;
$(document).ready(function(){
  $("#start").click(function(){
if(start_flag==0)
{
  $("#box").animate({height:10},"slow");
  $("#box").animate({width:10},"slow");
  start_flag=1;
}
else
{
  $("#box").animate({width:200},"slow");
  $("#box").animate({height:300},"slow");
  start_flag=0;
}
  });
});

$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});

</script> 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>jQuery slideToggle效果</p>
<p>jQuery slideToggle效果演示</p>
</div>

<p class="flip">猛击这里</p>

<p><a href="#" id="start">猛击这里</a></p>

<div id="box"
style="background:#98bf21;height:300px;width:200px;position:relative">
</div>

</body>
</html>