javascript

jquery动画课程(1)--show,hide和toggle

官方文档：

这三个函数是动画的基础，大部分动画都包含了出现和隐藏。jQuery的动画均以$.fn.animate函数为基础。

show和hide是改变元素的{width;height;opacity}来实现动画，动画结束后再{display}掉。

 

1、show和hide不带参数时，没有使用animate

$().show();
//相当于
$().css({'display':'block'});

  

$().hide();
//相当于
$().css({'display':'none'});

 

2、show会缓存display的值

①如果元素css设置了{display}显示值（block，inline，list-item等），当隐藏后再次显示会使用你设置的值；inline-block隐藏再显示时会认为是block。

<style type="text/css">
    .div{display:inline;}
</style>
<script type="text/javascript">
    $('.div').css('display');//inline
    $('.div').hide();
    $('.div').show();
    $('.div').css('display');//inline
</script>

  

<style type="text/css">
    .span{display:block;}
</style>
<script type="text/javascript">
    $('.span').css('display');//block
    $('.span').hide();
    $('.span').show();
    $('.span').css('display');//block
</script>

  

<style type="text/css">
    .p{display:list-item;}
</style>
<script type="text/javascript">
    $('.p').css('display');//list-item
    $('.p').hide();
    $('.p').show();
    $('.p').css('display');//list-item
</script>

inline-block隐藏再显示时会认为是block：

 

<style type="text/css">
    .p{display:inline-block;}
</style>
<script type="text/javascript">
    $('.p').css('display');//inline-block
    $('.p').hide();
    $('.p').show();
    $('.p').css('display');//block
</script>

 

②如果元素css没有设置{display}的显示值，块状元素会block，行内元素会inline。

 

3、toggle是封装了的show和hide

借用官网的例子：

$('#foo').toggle(showOrHide);
//相当于
if ( showOrHide == true ) {
 $('#foo').show();
} else if ( showOrHide == false ) {
 $('#foo').hide();
}