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;

}

});

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

html 页面打印分页符,html - 浮动的HTML / CSS打印分页符不起作用（例如：引导程序） - 堆栈内存溢出...
首先,分页符不能在绝对定位的元素中使用,因此请确保分页符不在一个元素中. 现在,由于浮动导致分页符被忽略,因此我们需要清除浮动. 问题很clear: both; 如果带有page-break-afte ...
html左浮动不管用图片往下放,html - 如何在HTML / CSS中水平对齐图像（浮动和显示内联块不起作用） - 堆栈内存溢出...
我有一个水平排列的图像库,但是后来我做到了,以便当您将鼠标悬停在图像上时,图像上会覆盖文字,现在我以前没有什么东西可以用来使它们水平排列. 我尝试在所有选择器上使用左浮点数(同样使用display i ...
css里的英文翻译,css常见英文翻译
<css常见英文翻译>由会员分享,可在线阅读,更多相关<css常见英文翻译(2页珍藏版)>请在人人文库网上搜索. 1.一.Color(颜色)参数:[颜色值]二.Backgrou ...
css里面的let,在css中创建类似边框效果的Droplet
使用 CSS3创建这样的效果肯定是可能的,但你需要的不仅仅是边框. 在下面的示例中,我使用了具有径向渐变背景的伪元素来模仿所示的边框效果.根据哪个边应该有边框,您可以调整伪元素的位置以实现效果. 答案 ...
vs2017创建外部css,webpack - 从生成的Microsoft SPA模板VS2017 webpack中删除特定供应商css - 堆栈内存溢出...
我使用Microsoft模板创建了几个SPA项目. dotnet new --install Microsoft.AspNetCore.SpaTemplates::* 然后运行: dotnet new ...
html溢出宽度控制,html - 具有固定宽度列的HTML / CSS表（如果内容溢出，则滚动） - 堆栈内存溢出...
我有一个带有一个或多个固定宽度列的HTML表. 有时,此类列的内容超出了列的宽度,我想在表格列的底部使用一个滚动条. 我想保持相同的语义HTML结构,并且没有重复的表或多次迭代. 我想要尽可能少的Ja ...
ie11 html元素操作,css - 在IE11中过滤html / body元素的灰度[重复] - 堆栈内存溢出
由于IE不支持滤镜:grayscale ,您可以尝试使用SVG + JS方法在IE中应用灰度滤镜. 以下是代码片段的一部分. // Grayscale images only on browsers ...
jQuery中ajax的触发时机,javascript - 如何在启动Ajax查询的jQuery中触发方法change（） - 堆栈内存溢出...
我有一个带有部门清单的选择项目html. 当我选择一个(方法"更改")时,它将在jquery中启动ajax请求,该请求将显示在另一个select输入中,即从数据库中获取的城市列表. ...
ajax会占用服务器端内存吗,javascript - 为什么不允许在jquery datatable服务器端处理ajax成功使用？ - 堆栈内存溢出...
我正在使用asp.net mvc5并尝试使用jquery datatable插件服务器端处理. 服务器端处理的教程显示了从服务器返回结果的格式.但是我的项目的不同之处在于我无法从服务器发送" ...

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

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

最新文章

热门文章