动画效果淡入淡出切换元素的可见状态

最新推荐文章于 2023-12-03 19:15:00 发布

原创最新推荐文章于 2023-12-03 19:15:00 发布 · 668 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了jQuery中的动画效果，包括隐藏和显示匹配元素的方法，如hide()和show()，以及淡入淡出效果的实现。此外，还详细讲解了toggle()方法如何切换元素的可见状态，实现优雅的动画过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery中的动画效果

隐藏匹配元素
使用hide（）方法可以隐藏匹配的元素，hide（）方法将元素CSS样式属性display的值设置为none，他会记住原来的display的
值。hide（）方法语法格式
1.不带参数的形式，用于实现不带任何效果的隐藏匹配元素
hide（）隐藏全部图片 $(“img”).hide（）
2.带参数的形式，用于以优雅的动画隐藏所有的匹配元素，并隐藏完成后可选的触发一个回调函数
hide（speed，[callback]）
speed:用于指定动画得到时长
callback：可选参数，用于指定隐藏完成后要触发的回调函数

显示匹配元素

show（）方法可以显示匹配的元素。show（)方法可以显示匹配的元素。show（）方法相当于CSS样式属性display的值设置为block或inline或除了none以外的值，它会恢复为应用display：none之前的可见属性
show（）方法
1.不带参数的形式，用于实现不带任何效果的显示匹配元素
show（）隐藏全部图片$(“img”).show();
2.带参数的形式，用于以优雅的动画隐藏所有的匹配元素，并隐藏完成后可选的触发一个回调函数
show（speed，[callback]）
speed:用于指定动画得到时长
callback：可选参数，用于指定隐藏完成后要触发的回调函数

<script type="text/javascript">
 $(document).ready(function(){
  $("#flag").mouseover(function(){
   if($("#menu").is(':hidden')){   // 判断菜单是否为隐藏状态
    $("#menu").show(300);  // 如果隐藏，则将菜单显示
   }
  });
  $("#menu").hover(null,function(){
   $("#menu").hide(300);  //隐藏菜单
  });  
 });
</script>

<style type="text/css">
ul{
 font-size:12px;
 list-style:none; /*不显示项目符号*/
 margin:0px;  /*设置外边距*/
 padding:0px;  /*设置内边距*/
}
li{
 padding:7px;  /*设置内边距*/
}
a{
 color:#000;    /*设置文字的颜色*/
 text-decoration: none; /*不显示下划线*/
}
a:hover{
 color:#F90;   /*设置文字的颜色*/
}
#menu{
 float:left;    /*浮动在左侧*/
 text-align:center;   /*文字水平居中显示*/
 width:70px;    /*设置宽度*/
 height:295px;    /*设置高度*/
 padding-top:5px;   /*设置顶内边距*/
 display:none;    /*显示状态为不显示*/
 background-image:url(../imgs/menu_bg.gif);  /*设置背景图片*/
}
</style>

<div id="menu">
<ul>
 <li><a href="www.mingribook.com">图书介绍</a></li>
    <li><a href="www.mingribook.com">新书预告</a></li>
    <li><a href="www.mingribook.com">图书销售</a></li>
    <li><a href="www.mingribook.com">勘误发布</a></li>
    <li><a href="www.mingribook.com">资料下载</a></li>
    <li><a href="www.mingribook.com">好书推荐</a></li>
    <li><a href="www.mingribook.com">技术支持</a></li>
    <li><a href="www.mingribook.com">联系我们</a></li>
</ul>
</div>
<img  src="../imgs/title.gif" width="30" height="80" id="flag" />

淡入淡出的动画效果

如果在显示或隐藏元素时不需要改变元素的高度和宽度，之单独
改变元素的透明度的时候，就需要使用淡入淡出的动画效果了。

在上面的代码加上

<script type="text/javascript">
$(document).ready(function(){
  $("#flag").mouseover(function(){
    $("#menu").fadeIn(700);
    });
    $("menu").hover(null,function(){
    $("#menu").fadeOut(700);
    });

});
</script>

切换元素的可见属性

toggle（）方法可以实现切换元素的可见状态，也就是如果元素是可见的，切换为隐藏；如果元素是隐藏的，可切换为可见。toggle（）方法格式如下
toggle（）；

<script type="text/javascript">
   $(document).ready(function(){
    $("input[type='button']").click(function(){
     $("div").toggle();
    });
   });
   
   
  </script>
<body>
  
 <div>明日科技</div>
 <div>明日图书</div>
 <input type="button" value="切换状态"></div>
 </body>