关于JQ中slideUp,slideDown以及solideTogle的问题

原创 2016年08月31日 11:53:48

针对问题:鼠标浮动在一个div的底部展开或收缩一个提示


默认状态下的问题:

1.使用slideUp前提条件:必须在模块展出的情况下才能使用

2.使用slideDown前提条件:可以直接出现

3.默认情况下使用以上方法或者slideToggle会让想要展开的模块从上到下进行活动


【常见的做向下展开的效果很简单,直接用slideUp跟slideDown就行。如果要展开的div是通过position:absolute绝对定位的,且通过相对与底部定位,如bottom:0px 这个时候调用slideDown就是向上展开的。】


解决问题:

1.设置想要展开模块的CSS--position:absolute属性

2.设置该属性的bottom:0px;让该模块和父级模块同一bottom

3.直接使用slideToggle可以是该模块从下到上展开


#pp{position: absolute;bottom: 0px; }


$("#div1").hover(function(){
$("#pp").slideToggle("slow");
});

相关文章推荐

遇到jQuery 中的 slideUp ,slideToggle和 slideDown 动画重复执行

说明 jQuery 可以通过调用 animate 方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中 slideDown和 slideUp 两方法的作用是纵向展开和卷起一个页面元...

jQuery-动画效果animate() slideDown() slideUp() fadeIn() fadeOut()

JQuery动画 以下JS代码公用的HTML:   Show:Paragraph 2 Show:Paragraph 2...

jQuery学习21---简单动画效果,show,hide,slideUp,slideDown,fadeOut,fadeIn

show(),hide()如果不带参数,则立即显示,或隐藏,如果指定速度参数则会 用指定时间进行动态显示,隐藏,单位为毫秒,也可以使用三个内置的速度 fast(200ms) slow(600ms)...

slideUp()方法和slideDown()方法

slideUp()方法和slideDown()方法 slideUp()方法和slideDown()方法只会改变元素的高度.当调用slideDown()方法时,这个元素将由上到下延伸显示.sideUp(...
  • NDKHBWH
  • NDKHBWH
  • 2017年03月27日 14:34
  • 246

HTML中fieldset标签以及slideUp和slideDown的使用

fieldset的简单示例如下 查询结果 得分: 88: 结合jQuery实现fieldset的滑动效果(slideUp 和slideDown): slideU...

【jQuery】slideUp()和slideDown()函数

slideUp() slideUp()函数用于隐藏所有匹配的元素,并带有向上滑动的过渡动画效果。 向上滑动的动画效果,即元素可见区域的高度从原有高度逐渐减小到0(向上逐渐收起)。 如果元素本身是隐藏的...

用原生JavaScript写出类似jQuery中slideUp和slideDown效果

本文主要介绍如何用原生JavaScript代码实现类似jQuery中的slideUp和slideDown效果。首先用一个不完善的例子来引入JavaScript中定时器的”问题“,然后给出相应的解决方案...

转:遇到jQuery 中的 slideUp ,slideToggle和 slideDown 动画重复执行

jQuery 可以通过调用 animate 方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中 slideDown和 slideUp 两方法的作用是纵向展开和卷起一个页面元素, 被使...

jquery的hide(),show(),fastIn(),fastOut(),slideUp(),slideDown()的使用

$(function(){ //hide,show,fastIn,slideUp,slideDown,fastOut都有两个参数,一个是speed,还有callback ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于JQ中slideUp,slideDown以及solideTogle的问题
举报原因:
原因补充:

(最多只允许输入30个字)