jQuery动画基础隐藏和显示 – 显示与隐藏切换toggle方法

show与hide是一对互斥的方法。需要对元素进行显示隐藏的互斥切换,通常情况是需要先判断元素的display状态,然后调用其对应的处理方法。比如显示的元素,那么就要调用hide,反之亦然。 对于这样的操作行为,jQuery提供了一个便捷方法toggle用于切换显示或隐藏匹配元素

基本的操作:toggle();

这是最基本的操作,处理元素显示或者隐藏,因为不带参数,所以没有动画。通过改变CSS的display属性,匹配的元素将被立即显示或隐藏,没有动画。

  • 如果元素是最初显示,它会被隐藏
  • 如果隐藏的,它会显示出来

display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline,然后是隐藏和显示,这个元素将再次显示inline

提供参数:.toggle( [duration ] [, complete ] )

同样的提供了时间、还有动画结束的回调。在参数对应的时间内,元素会发生显示/隐藏的改变,在改变的过程中会把元素的高、宽、不透明度进行一系列动画。这个元素其实就是show与hide的方法

直接定位:.toggle(display)

直接提供一个参数,指定要改变的元素的最终效果

其实就是确定是使用show还是hide方法

if ( display === true ) {
  $( "elem" ).show();
} else if ( display === false ) {
  $( "elem" ).hide();
}

您可能对这些资源感兴趣

jQuery动画基础隐藏和显示 – 隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局,如果在代...
jQuery动画切换的比较 – toggle与slideToggle以及fadeToggle的比较... 操作元素的显示和隐藏可以有几种方法。 例如: 改变样式diplay为none 位置高度为0 透明...
jQuery自定义动画 – 动画animate(上) 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了 操作一个元素执行3秒的...
jQuery上卷下拉效果 – 下拉动画slideDown 对于隐藏的元素,在将其显示出来的过程中,可以对其进行一些变化的动画效果。之前学过了show方法,show方法在显示的过程...
jQuery核心 – each方法的应用 jQuery中有个很重要的核心方法each,大部分jQuery方法在内部都会调用each,其主要的原因的就是jQuery...
jQuery自定义动画 – 动画animate(下) animate在执行动画中,如果需要观察动画的一些执行情况,或者在动画进行中的某一时刻进行一些其他处理,我们可以通过an...

发表评论

电子邮件地址不会被公开。 必填项已用*标注