网页设计之用jQuery显示和隐藏元素

网页设计之用jQuery显示和隐藏元素

      网页设计师在制作网页的时候，经常会用到显示和隐藏元素，这是一个基本的技术，在这里，我们是要分享如何用jQuery做到这一点。

      1.HTML标记

<div class="list-tag">
<div class="content-list-tag">
 

</div>
<div class="more-tags">
 <img src="http://www.web0752.com/images/logo.jpg" alt="网站建设" border="0">
</div>

       2.CSS

.list-tag {
 height: 195px;
 overflow: hidden;
}

.more-tags {
 cursor: pointer;
 padding-top: 15px;
 background: url(''shade-tag.png'') center top no-repeat;
 display:block;
 text-align: center;
}

      3.JS jQuery

$(''.more-tags'').toggle(function() {

 contentTagsHeight = $(''.content-list-tag'').height();

 $(''.list-tag'').animate({height : contentTagsHeight});
 $(this).children(''img'').animate({rotate: ''180deg''});

}, function() {

 $(''.list-tag'').animate({height : ''195px''});
 $(this).children(''img'').animate({rotate: ''0deg''});

});

这我们就完成了。通过修改CSS和JS你还可以做更炫丽的效果。