关于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");
});

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

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

jQuery在使用each及animate等方法出现卡顿

问题场景 jQuery 在使用选择器对页面上多个html元素进行动画操作的时候,如果元素数量较多则会出现卡顿。因此在页面特效的设计上需要考虑这一类情况。 解决方案 实际上我们在对for循环...
  • MrEmotion
  • MrEmotion
  • 2017年02月20日 16:38
  • 2007

JQuery mouse..事件+元素显示隐藏 切换 +淡入淡出+滑动效果。(可以做一个ul li下拉框滑动收起效果:slideUp)

mouseout()与mouseleave()的区别 #pid { border-style:solid; bo...
  • Fanbin168
  • Fanbin168
  • 2013年10月31日 00:19
  • 4652

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

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

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

JQuery动画 以下JS代码公用的HTML:   Show:Paragraph 2 Show:Paragraph 2...
  • qiqingjin
  • qiqingjin
  • 2016年01月15日 21:38
  • 2002

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

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

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

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

slideUp()方法和slideDown()方法

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

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

fieldset的简单示例如下 查询结果 得分: 88: 结合jQuery实现fieldset的滑动效果(slideUp 和slideDown): slideU...
  • fangzilixia
  • fangzilixia
  • 2015年02月28日 14:06
  • 283

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

jQuery 可以通过调用 animate 方法添加动画效果, 而且还提供了一套别名, 使用起来很是方便. 其中 slideDown和 slideUp 两方法的作用是纵向展开和卷起一个页面元素, 被使...
  • ws753191675
  • ws753191675
  • 2016年12月12日 16:45
  • 1020
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于JQ中slideUp,slideDown以及solideTogle的问题
举报原因:
原因补充:

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