首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在具有浮动元素和绝对定位元素的元素上使用jQuery fadeOut函数时的奇怪行为

在使用jQuery的fadeOut函数时,如果元素具有浮动或绝对定位,可能会出现一些奇怪的行为。这是因为在执行fadeOut函数时,元素的浮动或绝对定位属性可能会影响元素的隐藏过程。为了解决这个问题,可以在执行fadeOut函数之前,先将元素的浮动或绝对定位属性移除,然后在执行fadeOut函数之后,再将元素的浮动或绝对定位属性重新添加回去。

以下是一个示例代码:

代码语言:javascript
复制
$("#element").css({"float": "none", "position": "static"});
$("#element").fadeOut(function() {
  $(this).css({"float": "left", "position": "absolute"});
});

在这个示例代码中,我们首先将元素的浮动属性设置为none,将其定位属性设置为static。然后执行fadeOut函数,在fadeOut函数的回调函数中,将元素的浮动属性设置为left,将其定位属性设置为absolute。这样就可以避免在使用fadeOut函数时出现的奇怪行为。

需要注意的是,在使用这种方法时,需要确保元素的父元素或其他相邻元素不会受到元素的变化而影响布局。如果需要更好地控制元素的隐藏和显示效果,可以考虑使用其他方法,例如使用CSS的transition属性或使用jQuery的animate函数。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery动画】停止动画、淡入淡出、自定义动画

实现效果 代码及思路 总结 ---- 停止动画 使用动画过程中,如果在同一个元素上调用一个以上动画方法,那么对这个元素来说,除了当前正在调用动画,其他动画将被放到效果队列中,这样就形成了动画队列...) 以淡入淡出方式将匹配元素调整到指定透明度 fadeToggle([speed],[easing],[fn]) fadeIn()fadeOut()两种效果之间切换 注意:fadeTo()方法参数...思路: 1、引入jQuery库; 2、为所有颜色方块设置2秒完成半透明淡入效果(fadeTo); 3、添加鼠标滑过函数(hover); 4、为每一个方块设置动画效果,即当前元素(this...代码演示 实现效果 自定义动画 代码及思路 思路: 1、定义按钮,定义div元素; 2、设置盒子大小、颜色、绝对定位(position:absolute),绝对定位盒子是相对于离它最近一个已定位盒子进行定位...,默认是body; 3、给定义按钮绑定点击事件; 4、设置动画,当单击鼠标,div元素运动到距离左侧500px,距离顶部300px位置,透明度为0.4,宽度为500px; <!

2.5K20

2019年底前web前端面试题初级-web标准应付HR大多面试问题

浮动float,就是让元素脱离文档普通流,浮动普通流之上。 浮动元素,根据它设置浮动方向向左或者向右,直到浮动元素外边缘遇到包含框,或是另一个浮动元素为止,可以让文本内联元素环绕它。...那么浮动元素会带来什么影响:->重点: 一般使用浮动后都要清除,否则后面的元素可能会出现问题。清除浮动并不是指让元素自身没有浮动效果,而是消除元素浮动对其他元素影响。...:绝对定位,相对定位 position:absolute; 绝对定位(默认,相对于body元素,相对于浏览器窗口) div { width: 200px; height: 200px; border...构造函数,就是一个普通函数,但是内部使用了this变量。 对构造函数使用new,就能生成实例,并且this变量会绑定到实例对象。...一个函数内部创建另外一个函数,并把这个函数return。 用函数元素绑定事件,当事件发生,可以操作该函数变量。

2.4K50
  • jQuery特效 | 导航底部横线跟随鼠标缓动

    今天就针对该特效来说说如何开发(本次内容使用jQuery进行讲解,原生JavaScript代码下周一奉上) 功能效果图 ?...样式处理 针对父级元素进行相对定位设置,针对子级元素(横线)设置绝对定位,并且设置leftbottom值 针对每个导航元素进行样式设置,需要注意是,针对“当前”导航,需要给出不同于其他元素样式(...功能逻辑 当鼠标移入具体每个导航,设置“横线”left值,使用animate方法实现其缓动效果。 当鼠标移入移出整个导航条,再控制横线显示与隐藏。 ?...淡入淡出 $(ele).fadeIn(seconds); $(ele).fadeIn(seconds); fadeInfadeOut遵循“对象.方法”书写方式,fadeIn()、fadeOut(...; position()方法是jQuery方法,$(ele).position().left表示元素与其相对定位元素左边距离。

    8.7K50

    jQuery

    jQuery 对象是经过包装dom对象(伪数组形式存储) jQuery对象才能使用jQuery方法,不能混用 1.1.4 jQuery对象Dom对象转换 // DOM对象转换成jQuery对象...fn :回调函数动画完成执行函数 3.2.2 滑入滑出 滑入滑出:slideDown() / slideUp() / slideToggle() ; 3.2.3 淡入淡出 淡入淡出:fadeIn...,第二个是鼠标移出触发函数 只写一个参数,鼠标移入移出都会触发它 4.1 jQuery属性操作 4.1.1 元素固有属性值 prop() 获取元素本身自带属性,有利于对表单操作 表单属性...('属性名'); //更改 attr('属性名','属性值'); 4.1.3 数据缓存 data() 可以指定元素存取数据,但不会修改DOM元素结构。...设置元素被卷去头部左侧 不跟参数是获取,跟参数是设置 5.1 jQuery 事件 5.1.1 on() 绑定事件 on()绑定事件好处 可以绑定多个事件,多个处理事件函数 $('div').on

    8.4K10

    JS面试题(一)

    return基本数据类型无效, return引用类型,返回值是return内容 3.构造函数this指什么?...new生成实例 4.如何检测一个属性是否为对象自身属性 对象.hasOwnProperty(“属性”) 5.构造函数原型实例关系 new构造函数生成实例 实例__proto__指向构造函数原型...jQuery.noConflict() jQuery 使用 noConflict 方法来放弃 调用时命名,之后由 jQuery 代替 进行编写 54、如何用jQuery获取元素文档中位置?...(“dom”).offset().top无定位位置 (“dom”).position().top有定位位置 55、瀑布流实现原理 先将图片绝对定位,通过计算出一排能够容纳几列元素,然后寻找各列之中所有元素高度之和最小者...合并jquery对象 var obj=$.extend(deep,{},obj1,obj2) deep是true,是深拷贝 60、jQueryend()有什么作用?

    11810

    测试开发进阶(十三)

    浮动定位 定位 CSS 有三种基本定位机制:普通流、浮动绝对定位。 通过使用 position 属性,选择不同类型定位。...相对定位:position: relative; 使用相对定位,无论是否进行移动,元素仍然占据原来空间。因此,移动元素会导致它覆盖其它框。...这一点与相对定位不同,相对定位实际被看作普通流定位模型一部分,因为元素位置相对于它在普通流中位置。 因为绝对定位框与文档流无关,所以它们可以覆盖页面上其它元素。...固定位置:position:fixed; 直接以浏览器窗口作为参考进行定位,它是浮动页面中,元素位置不会随浏览器窗口滚动条滚动而变化 浮动 浮动框可以向左或向右移动,直到它外边缘碰到包含框或另一个浮动边框为止...使用 return 语句函数会停止执行,并返回指定值。

    89220

    CSS粘性定位是怎样工作

    static relative 会保留它们文档流中自然空间,而 absolute fixed 则不会 —— 它们空间被移除而且具有浮动行为。...粘性元素没有任何要浮动元素,因为它只能浮动同级元素,作为唯一元素,它不能浮动。...固定 —— 当元素被粘住,它行为与 position: fixed 完全相同,浮动与视口相同位置,并从流中移除。...绝对 —— 粘贴区域末尾,元素会停止,并堆叠在另一个元素顶部,就像一个绝对定位元素被放在一个 position: relative 容器内行为。 粘在底部?...这意味着你可以把页脚定义为粘性,并且向下滚动使它看起来总是被粘在底部。 当到达粘性容器末端元素会停在它自然位置。 最好是以粘性容器底部为自然位置元素使用它。

    1.8K10

    第73天:jQuery基本动画总结

    中上卷动画slideUp 最简单使用:不带参数 $("elem").slideUp(); 这个使用含义就是:找到元素高度,然后采用一个下滑动画让元素一直滑到隐藏,当高度为0时候,也就是不可见...参数对应时间内,元素会完成动画,然后出发回调函数 同时也提供了时间快速定义,字符串 'fast' 'slow' 分别代表200600毫秒延时 注意: - display属性值保存在jQuery...竖向动作,slideToggle 通过高度变化来切换所有匹配元素可见性 fadeToggle方法 - fadeToggle() 方法 fadeIn() fadeOut() 方法之间切换。...- 注释:隐藏元素不会被完全显示(不再影响页面的布局) 12、jQuery中动画animate() 有些复杂动画通过之前学到几个动画函数是不能够实现,这时候就需要强大animate方法了 操作一个元素执行...jQuery.trim()函数用于去除字符串两端空白字符 这个函数很简单,没有多余参数用法 需要注意: - 移除字符串开始结尾处所有换行符,空格(包括连续空格)制表符(tab) - 如果这些空白字符字符串中间

    3.2K10

    前端开发面试题

    absolute 生成绝对定位元素,相对于值不为 static第一个父元素进行定位。 fixed (老IE不支持) 生成绝对定位元素,相对于浏览器窗口进行定位。...不起作用.如果元素float属性不是none,元素会脱离文档流,根据float属性值来显示.有浮动,绝对定位,inline-block属性元素,margin不会垂直方向上其他元素margin折叠....清除浮动方式 清除浮动是为了清除使用浮动元素产生影响。浮动元素,高度会塌陷,而高度塌陷使我们页面后面的布局不能正常显示。...null : 是一个对象(空对象, 没有任何属性方法); 例如作为函数参数,表示该函数参数不是对象; 注意: 验证null,一定要使用 === ,因为...*jQuery是一个js库,主要提供功能是选择器,属性修改事件绑定等等。 *jQuery UI则是jQuery基础,利用jQuery扩展性,设计插件。

    5.1K52

    css笔记 - 张鑫旭css课程笔记之 absolute 篇

    absolute绝对定位 绝对定位浮动鲜为人知兄弟关系 即是说,absolute后,元素浮动元素特性差不多,只不过absolute脱离文档流,元素飘在天上,float还在凡间。...所以,absolute元素特性: 包裹性 容器使用absolute后,就形成一个inline-block包裹了内部元素具有包裹性。 破坏性 子元素绝对定位,脱离父元素文档流,父元素高度塌陷。...absolute行为表现 在给一个元素单独设置了absolute之后,其表现如下: 脱离文档流让位给后人,自己原来位子让出来给后边元素 自己却垂直而飞上天,但只是垂直而,还是自己原来位置上空...对于前后排列多个浮动兄弟元素,其中一个使用absolute,只是飘起来不改位置行为不适用此情景 absolute特性表现 去浮动:absolutefloat不能同时存在,如果之前有float,使用...位置跟随:也就是行为表现里第二条,自己垂直飞上天后,其位置还是跟随原来地面点,如果地面的点移动,他也会移动,如果地面的点不动,他就是原来点垂直方向上稳住。

    38920

    一篇通俗易懂CSS层叠顺序与层叠上下文研究

    行内块行为一样,背景层级比文字高,并且也是后一个元素比前一个元素层级高。 小总结 当两个元素为正常流,默认情况下后一个元素比前一个元素层级高,并且允许后面的元素透上来。...绝对定位元素绝对定位层级高。 决定定位行内块,绝对定位层级高。 绝对定位行内元素绝对定位层级高。 绝对定位浮动绝对定位层级高。 其他定位绝对定位效果一样。 ? ? ? ? ? ?...块元素其他任意除定位元素以外,文字层级比背景层级高。 浮动元素浮动层级高。 浮动行内块,行内块层级高。 浮动行内,行内层级高。 定位定位,后一个元素层级高。 定位比所有元素层级高。...它们前后顺序:小于0z-index < 块 < 浮动 < 行内块 < 行内 < 定位 < 大于0z-index 层叠上下文 如果你认真看完一节,会不会奇怪一个问题,那就是无特殊情况下为什么定位元素总是比普通元素层级高...默认情况下只有根元素HTML会产生一个层叠上下文,并且元素一旦使用了一些属性也将会产生一个层叠上下文,如我们常用定位属性。如两个层叠上下文相遇,总是后一个层叠前一个,除非使用z-index来改变。

    82870

    jQuery Cheat—Sheet(jQuery学习笔记)

    在下面的实例中,当点击事件某个 元素触发,隐藏当前元素: $("p").click(function(){ $(this).hide(); }); 双击事件 当双击元素,会发生...在下面的实例中,当双击事件某个 元素触发,隐藏当前元素: $("p").dblclick(function(){ $(this).hide(); }); 鼠标穿过事件 当鼠标指针穿过元素...当鼠标移动到元素,会触发指定第一个函数(mouseenter,); 当鼠标移出这个元素,会触发指定第二个函数(mouseleave)。...; }); 获得焦点事件 当元素获得焦点,发生 focus 事件。 当通过鼠标点击选中元素或通过 tab 键定位元素,该元素就会获得焦点。...**Chaining 允许我们一条语句中运行多个 jQuery 方法**(相同元素) ### jQuery 方法链接 有一种名为链接(chaining)技术,允许我们相同元素运行多条 jQuery

    16.2K30

    前端学习资料整理

    如何居中一个浮动元素?如何让绝对定位div居中?...absolute 生成绝对定位元素,相对于 static 定位以外第一个父元素进行定位。 fixed (老IE不支持) 生成绝对定位元素,相对于浏览器窗口进行定位。...; 例如作为函数参数,表示该函数参数不是对象; 注意: 验证null,一定要使用 === ,因为 == 无法分别 null  undefined 再来一个例子: null Q:有张三这个人么?...],fn) 选择元素绑定一个或多个事件事件处理函数 差别: .bind()是直接绑定在元素 .live()则是通过冒泡方式来绑定到元素。...*jQuery是一个js库,主要提供功能是选择器,属性修改事件绑定等等。 *jQuery UI则是jQuery基础,利用jQuery扩展性,设计插件。

    3.5K20

    前端开发JS——jQuery常用方法

    handlerOut(eventObject):当鼠标指针离开元素触发执行事件函数 7、jQuery鼠标事件之focusin与focusout事件 focusin 方法用于监听用户元素聚焦操作(如...注:如果要阻止浏览器某些默认行为,可以传统调用事件对象e.preventDefault()来处理;也可以函数上返回false 12、jQuery键盘事件之keydown与keyup事件 keydown...快捷参数:fast默认200ms,slow默认600ms,duration时间,complete:function(){}等 5、jQuery中淡出/淡入动画之fadeOutfadeIn方法(改变元素透明度...) 元素淡出隐藏方法fadeOut ()上述.hide()很相似;元素淡入显示方法fadeIn()上述show()很相似,fadeOut fadeIn方法使用很相似,以slideDown为例...$ele.fadeOut () 直接用淡出隐藏所有匹配元素 $ele.fadeOut (options) 只会改变元素透明度opacity,即页面布局刚开始不会变化,透明度为0,页面布局才发生改变

    4.9K20

    jQuery

    (当文档完成加载) $(selector).click(function) 触发或将函数绑定到被选元素点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素双击事件...jQuery toggle() 通过 jQuery,您可以使用 toggle() 方法来切换 hide() show() 方法。...不过,需要记住一件重要事情:当使用 animate() ,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight...stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出自定义动画。...因此,默认地,stop() 会清除在被选元素指定的当前动画。 jQuery Callback 函数 Callback 函数在当前动画 100% 完成之后执行。 许多 jQuery 函数涉及动画。

    4.3K30

    Python 之Web编程

    脱离文档流:将元素从普通布局排版中拿走,其他盒子定位时候,会当作脱离文档流元素不存在而进行定位。 只有绝对定位absolute浮动float才会脱离文档流。   ...注:部分无视完全无视区别?使用float脱离文档流,其他盒子会无视这个元素,但其他盒子内文本依然会为这个元素让出位置,环绕在周围。...2、relative:相对定位,相对于该元素文档流中原始位置,即以自己原始位置为参照物。 3、absolute:绝对定位元素定位后生成一个块级框,不论原来他正常流中生成何种类型框。...5、margin属性布局绝对定位元素:margin-bottommargin-right值不对文档流中元素产生影响,因为该元素已经脱离了文档流。  ...事件通常与函数结合使用函数不会再事件发生前被执行!Event对象事件发生系统已经创建好了,并且会在事件函数被调用时传给事件函数,我们仅仅需要接受一下即可。 ? ? 1 <!

    2.5K22

    HTML+CSS高级

    第二个div用margin-left设置,让其视觉不被遮挡           3.2      当浮动元素相邻下一个块级元素包含文本内容浮动元素没有覆盖文本,而是浮动文本左边                ...1.2.5     绝对定位一般是配合相对定位使用                1.2.6     提升层级,假设都是定位元素,则后面的元素覆盖前面的元素(后面的层级高)           1.3    ...          1.11     IE6下绝对定位元素浮动元素并列绝对定位元素消失                解决办法:让两元素不处于同级           1.12     IE6下...第二个div用margin-left设置,让其视觉不被遮挡           3.2      当浮动元素相邻下一个块级元素包含文本内容浮动元素没有覆盖文本,而是浮动文本左边                ...          1.11     IE6下绝对定位元素浮动元素并列绝对定位元素消失                解决办法:让两元素不处于同级           1.12     IE6下

    5.8K61

    CSS粘性定位 - 它真正工作原理!

    static relative 保留其文档流中自然空间,而 absolute fixed 则不保留空间,它们具有浮动行为。而新sticky定位具有所有类型相似性。...Stick 探索 尝试使用 sticky 定位过程中,我很快发现,当一个具有sticky定位样式元素被包裹起来,并且它是包裹元素内唯一元素,这个被定义为sticky定位元素并不会"粘"住。...这样做原因是,当一个元素被赋予sticky定位样式,粘性元素容器是粘性元素可以粘住唯一区域。这个元素没有其他元素可以浮动,因为它只能浮动兄弟元素,而作为唯一元素,它没有兄弟元素。...Absolute 定位 - 粘附区域末尾,元素停止并堆叠在另一个元素顶部,就像绝对定位元素 position: relative 容器内行为一样。 贴在底部?...但你也可以使用它将元素粘贴到底部。这意味着可以定义页脚具有粘性位置,并且向下滚动始终会出现粘在底部。当我们到达粘性容器末尾元素将停留在其自然位置。最好将其用于自然位置为粘性容器底部元素

    28820

    web前端开发初学者十问集锦(5)

    原来JavaScript事件中调用函数用return返回值实际是对window.event.returnvalue进行设置。而该值决定了当前操作是否继续。当返回是true,将继续操作。...3.JS获取元素left属性为NaN 我遇到问题是使用JS获取定位为relative元素,解析返回值是一个NaN。我获取left属性代码如下。...我们知道CSS中定位方式有默认定位(static),相对定位(relative),绝对定位(absolute),固定定位(fixed)区别?...默认定位就是元素正常出现在文档流中静态位置,当使用float之后,元素会脱离文档流,向左或向右浮动浮动停止条件有如下三种情况: (1)碰到包含框; (2)同级浮动框; (3)包含有内容框...那么问题来了,浮动元素定位方式是什么呢? 我个人理解是浮动元素定位方式就是浮动

    88420

    前端面试实录CSS篇(最近一周)

    元素伪类区别作用? • 伪类:将某种状态添加到已有元素,这个状态是根据用户行为变化而变化为。...• 区别: • 伪类操作对象是文档树种已有的元素或样式 • 伪元素则是创建一个文档树以外元素或样式 • : 表示伪类 • :: 表示伪元素 • 作用: • 伪类:通过元素选择器加入伪类改变元素状态...垂直方向上,自上而下排列,和文档流排列方式一致 2. BFC 中上下两个相邻两个容器 margin 会重叠 3. 计算 BFC 高度,需要计算浮动元素高度 4....使用关键选择器,不要逐层进行选择 • 渲染性能 1. 慎重使用浮动定位 2. 尽量减少重绘回流发生 3. 删除空规则,也就是预留样式->{} 4. 属性值为浮点值,省略前面的 0 5....imgfixed:元素定位是相对于 window (或者 iframe)边界其他元素没有关系。但是它具有破坏性,会导致其他元素位置变化。

    11110
    领券