類似于android手機的狀態欄下拉效果，但方向相反。Div塊在底部，當點擊按鈕時，div向上展開，再次點擊時向下收回。做向下展開的效果很簡單，直接用slideUp跟slideDown就行。但要底部向上展開不會，試了幾個都是點擊后仍然向下展開。
4 回答
慕哥6287543
TA貢獻1831條經驗 獲得超10個贊
如果你的div是通過position:absolute絕對定位的，且通過相對與底部定位，如bottom:0px 這個時候調用slideDown就是向上展開的（因為slideDown說白了就是動態改變元素高度，底部定位固定，高度變高的時候就向上擴展了）。
或者可以使用jQuery的$().animate()動畫方法，自己定義動畫的內容，因為不知道你的div是通過什么方法定位到底部的，這里只能寫個簡單的例子
$("#bar").stop(true,true).animate({hight:100px});
慕碼人8056858
TA貢獻1803條經驗 獲得超6個贊
一、類似于android手機的狀態欄下拉效果，但方向相反。Div塊在底部，當點擊按鈕時，div向上展開，再次點擊時向下收回。
二、如果你的div是通過position:absolute絕對定位的，且通過相對與底部定位，如bottom:0px 這個時候調用slideDown就是向上展開的（因為slideDown說白了就是動態改變元素高度，底部定位固定，高度變高的時候就向上擴展了）。
三、或者可以使用jQuery的$().animate()動畫方法，自己定義動畫的內容，因為不知道你的div是通過什么方法定位到底部的，這里只能寫個簡單的例子$("#bar").stop(true,true).animate({hight:100px});
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之后又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操作、事件處理、動畫設計和Ajax交互。
jQuery的核心特性可以總結為：具有獨特的鏈式語法和短小清晰的多功能接口；具有高效靈活的css選擇器，并且可對CSS選擇器進行擴展；擁有便捷的插件擴展機制和豐富的插件。jQuery兼容各種主流瀏覽器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
拉丁的傳說
TA貢獻1789條經驗 獲得超8個贊
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | @-webkit-keyframes bounce-down { 25% { -webkit-transform: translateY(-3px); } 50%, 100% { -webkit-transform: translateY(0); } 75% { -webkit-transform: translateY(3px); } } @keyframes bounce-down { 25% { transform: translateY(-3px); } 50%, 100% { transform: translateY(0); } 75% { transform: translateY(3px); } } .animate-bounce-down{ -webkit-animation: bounce-down 1.3s linear infinite; animation: bounce-down 1.3s linear infinite; } |
如果不考慮低版本兼容，css3動畫可以簡單實現，給需要漂浮的元素添加animate-bounce-down這個類就好，浮動效果可以自行調試
- 4 回答
- 0 關注
- 547 瀏覽
添加回答
舉報
0/150
提交
取消