css里slidebottom,jquery - 从CSS“top”到“bottom”的jQuery动画 - 堆栈内存溢出

编辑：不得不快速离开，所以没有完成，我决定使用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;

}

});

});