清遠大學城網(http://www.qydxc.com)
常見的做向下展開的效果很簡單,直接用slideUp跟slideDown就行。如果要展開的div是通過position:absolute絕對定位的,且通過相對與底部定位,如bottom:0px 這個時候調用slideDown就是向上展開的。
(因為slideDown說白了就是動態改變元素高度,底部定位固定,高度變高的時候就向上擴展了)
代碼如下
復制代碼
//精品推薦
$('.remm_product ul li').hover(
function(){
$(this).find('.p_info').slideDown();
},
function(){
$(this).find('.p_info').slideUp();
}
)
jquery slidetoggle也可以實現內容緩慢展開和收起的操作。
代碼如下
復制代碼
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(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>Eiege.com</p>
<p>jquery專欄,學習和交流。Eiege專欄</p>
</div>
<p class="flip">請點擊這里</p>
</body>
</html>
jQuery 擁有以下滑動函數:
$(selector).slideDown(speed,callback):把內容從上向下展開
$(selector).slideUp(speed,callback):把內容從下向上收起
$(selector).slideToggle(speed,callback):內容上下方向的收起和展開
speed 參數可以設置這些值:"slow", "fast", "normal" 或毫秒。