jQuery效果-滑动效果

之前学完javascript,现在转战场到jquery,边学边记,这里说下jquery的面板效果。

首先,我们采用1.10.2版本的jquery。

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

之后,我们来了解两个方法,一个叫

slideDown() 向下滑动

slideUp()    向上滑动

之后借助if语句实现上滑动或者下滑动,代码如下:

<script> 
var i=0;
$(document).ready(function(){
  $("#flip").click(function(){
	  if(i==0){
		  $("#panel").slideDown("slow");
		  i=1;
	  }else{
		   $("#panel").slideUp("slow");
		  i=0;
	  }
    
  });
});
</script>

效果如下:

别以为完了,重点在后面呢,jQuery有个方法可以直接实现这个功能,无需这么麻烦。

slideToggle(),官方的说法就是通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。简单点说无非就是上滑动,下滑动嘛。

语法如下:
$("p").slideToggle("slow");

示例代码如下:

和上面的代码比起来是不是更简单,更方便呢~这就是jquery的用处。

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>

效果和上图一模一样,只不过代码更少了。

共有 0 条评论

Top