編輯：不得不快速離開，所以沒有完成，我決定使用jquery ui作為例子(你需要核心)：

#line_three { width:100%; }

.line3_top {

position:absolute;

top:113px;

left:0px;

}

.line3_btm {

position:absolute;

bottom:100px;

left:0px;

}

var topbtm = true;

$(document).ready(function(){

$("#line_three").mouseenter(function(){

if ( topbtm ) {

$("#line_three").switchClass("line3_top","line3_btm",400);

} else {

$("#line_three").switchClass("line3_btm","line3_top",400);

}

topbtm = !topbtm;

});

});

hello;

我也喜歡其他一些建議。

EDIT2：剛剛在IE中測試過...它的工作原理很奇怪。 也許不得不直接因為IE中的奇怪行為與Jquery UI開關類。

編輯3 ：

好吧，我讓這個適用于IE和FF ...雖然有些注意事項。 +20是為了防止跳躍。 innerHeight為0的測試是在沒有為元素(或主體)設置高度的情況下，因此如果它位于已定位的div中，則設置高度。

此外，這在jsfiddle中不起作用 ，但在常規網頁上工作。 為此，請避免使用jsfiddle。

var topbtm = 1,top3=113,btm3=100;

$(document).ready(function(){

$("#line_three").mouseenter(function(){

var ih = $(this).offsetParent().innerHeight();

if (ih==0){ih=$(document).innerHeight();}

if ( topbtm==1 ) {

topbtm=-1;

$("#line_three")

.animate({"top":(ih-(btm3+20))}

,500

,function(){

$(this).css({"top":"auto","bottom":btm3});

})

topbtm=0;

} else if ( topbtm==0 ) {

topbtm=-1;

$("#line_three")

.animate({"bottom":(ih-(top3+20))}

,500

,function(){

$(this).css({"bottom":"auto","top":top3});

})

topbtm=1;

}

});

});

總結

以上是生活随笔為你收集整理的css里slidebottom,jquery - 从CSS“top”到“bottom”的jQuery动画 - 堆栈内存溢出的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。