jQuery学习-简单下拉收缩特效实例

最近开始学习jQuery,看到这样一个实例,给大家看看。

此例中用到 jQuery 的 slideToggle() 方法,slideToggle() 方法通过使用滑动效果(高度变化)来切换元素的可见状态。如果被选元素是可见的,则隐藏这些元素,如果被选元素是隐藏的,则显示这些元素。

提示: 如果元素已经隐藏,则该效果不产生任何变化,除非规定了 callback 函数。

效果预览:

jQuery学习-简单下拉收缩特效实例-isaced

代码:

jQuery代码.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    }); 
});
</script>

CSS代码

<style type="text/css">
body { margin: 0 auto; padding: 0; width: 570px; font: 75%/120% Arial, Helvetica, sans-serif; }
a:focus { outline: none; }
#panel { background: #69C7F7; height: 200px; display: none; }
.slide { margin: 0; padding: 0; border-top: solid 4px #F27613;  }
.btn-slide { background: #F27613 url(http://www.iiwnet.com/images/jstx/white-arrow.gif) no-repeat right -50px;; text-align: center; width: 144px; height: 31px; padding: 10px 10px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; }
.active { background-position: right 12px; }
</style>

HTML代码

<div style="display: block;" id="panel"> 
  <!-- you can put content here --> 
</div>
<p class="slide"><a href="javascript:;" class="btn-slide active">点击试试</a></p>