Jquery實現(xiàn)由下向上展開效果的例子
更新時間:2014年12月08日 08:53:53 投稿:junjie
這篇文章主要介紹了Jquery實現(xiàn)由下向上展開效果的例子,本文同時講解了向下展開的例子,需要的朋友可以參考下
常見的做向下展開的效果很簡單,直接用slideUp跟slideDown就行。
如果要展開的div是通過position:absolute絕對定位的,且通過相對與底部定位,如bottom:0px 這個時候調(diào)用slideDown就是向上展開的。
(因為slideDown說白了就是動態(tài)改變元素高度,底部定位固定,高度變高的時候就向上擴(kuò)展了)
復(fù)制代碼 代碼如下:
//精品推薦
$('.remm_product ul li').hover(
function(){
$(this).find('.p_info').slideDown();
},
function(){
$(this).find('.p_info').slideUp();
}
)
您可能感興趣的文章:
- jQuery實現(xiàn)鼠標(biāo)滑過Div層背景變顏色的方法
- jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
- 基于jquery的用鼠標(biāo)畫出可移動的div
- jQuery實現(xiàn)div跟隨鼠標(biāo)移動
- jQuery實現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
- jQuery實現(xiàn)DIV層收縮展開的方法
- jquery實現(xiàn)鼠標(biāo)滑過顯示提示框的方法
- jQuery實現(xiàn)的鼠標(biāo)滑過彈出放大圖片特效
- jQuery實現(xiàn)表格展開與折疊的方法
- jQuery實現(xiàn)DIV響應(yīng)鼠標(biāo)滑過由下向上展開效果示例【測試可用】
相關(guān)文章
Spring MVC中Ajax實現(xiàn)二級聯(lián)動的簡單實例
下面小編就為大家?guī)硪黄猄pring MVC中Ajax實現(xiàn)二級聯(lián)動的簡單實例。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07jQuery實現(xiàn)的手機(jī)發(fā)送驗證碼倒計時效果代碼分享
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)手機(jī)注冊發(fā)送驗證碼倒計時功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-08-08jQuery動態(tài)追加頁面數(shù)據(jù)以及事件委托詳解
這篇文章主要為大家詳細(xì)介紹了jQuery動態(tài)追加頁面數(shù)據(jù)以及事件委托的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05