Jquery效果

sunhaitao123

浏览: 1207 次
性别:
来自: 深圳

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2012-02 ( 2)
更多存档...

博客分类：

Jquery

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Jquery 效果 </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
 <style type="text/css">
    div.panle
	{
        margin:10px;
		background:#e5eecc;
        padding:5px;
		height:120px;
		border:solid 1px #c3c3c3;

	}
 </style>
  <script>
    $(function(){
	         
			 $("#a").bind("click",function(){
			     // $("p").fadeOut();
				  //增加fadeOut消失速度,callback是动画效果执行完毕后进行的回调函数应用
				  $("p").fadeOut(1000,callback);
				  //$("p").fadeOut(1000);
			 });

			 $("#b").bind("click",function(){
			     
			     //$("p").fadeIn();

				 //同理显示出也一样
				 $("p").fadeIn(1000,function(){
				      alert("动画执行完毕后!");
				 });
			 });

			 function callback()
			 {
			    alert("开始测试1")
			 }

             
			 //2 切换P隐藏
            $("#c").bind("click",function(){
                    $("p").toggle();
			});

			//3 滑动DIV

			$("#d").bind("click",function(){
			
			      $(".panle").slideToggle(1000);
              

			});


	});
  </script>
 
 <body>





 <div border="1px">1.FadeIn与FadeOut用法 $(selector).fadeIn(speed,callback)  $(selector).fadeOut(speed,callback)
  <br/>
  <br/>
  <p>哈哈啊啊</p>
  <button id="a">FadeOut</button>
  <button id="b">FadeIn</button>
 </div>






<div border="1px">2.Toggle切换-------------$(selector).toggle(speed,callback)
<br/>
<br/>

<p>切换内容信息</p>
<p>把所有含P元素的标签进行切换隐藏</p>
<button id="c">切换Toggle</button>
</div>






<div  border="1px" class="panle">3.上下滑动-----------------$(selector).slideToggle()
<br/>
<br/>

<p>Jquery效果滑动内容信息,</p>

</div>

<button id="d">滑动</button>



 </body>
</html>

分享到：