jquery中的动画效果

最新推荐文章于 2024-09-20 17:38:49 发布

吴默涵1

最新推荐文章于 2024-09-20 17:38:49 发布

阅读量277

点赞数

本文链接：https://blog.csdn.net/wu964521/article/details/103002047

版权

5.2.1隐藏匹配元素
使用hide()方法可以隐藏匹配的元素。hide()方法相当于将元素css样式属性display的值设置为none，他会记住display的值，有两种语法格式，一种是不带参数的形式，用于实现不带任何效果的隐藏匹配元素。
语法格式：

hide()

另一种带参数的形式，用于一优雅的动画隐藏所有的元素，并隐藏完成之后触发一个回调函数。
语法格式：

hide(speed，[callback])；

5.2.2显示匹配元素
使用show()方法可以隐藏匹配的元素。hide()方法相当于将元素css样式属性display的值设置为black或inline或none之外的值，有两种语法格式，一种是不带参数的形式，用于实现不带任何效果的隐藏匹配元素。
语法格式：

show()

另一种带参数的形式，用于一优雅的动画隐藏所有的元素，并隐藏完成之后触发一个回调函数。
语法格式：

show(speed,[callback])

例：

 <body>
  <div id="menu" >
   <div style="position: relative;">
    <div style="position: absolute;">
     <ul>
    <li><a href="www.taobao.com">图书介绍</a></li>
    <li><a href="www.taobao.com">新书预告</a></li>
    <li><a href="www.taobao.com">图书销售</a></li>
    <li><a href="www.taobao.com">刊物发布</a></li>
    <li><a href="www.taobao.com">资料下载</a></li>
    <li><a href="www.taobao.com">好书推荐</a></li>
    <li><a href="www.taobao.com">技术支持</a></li>
    <li><a href="www.taobao.com">联系我们</a></li>
   </ul>
    </div>
    <img src="../menu_bg.gif" name="tupian" width="120" height="350"/>
   </div>
  </div>
  <img src="../title.gif" width="30" height="80" id="flag" />
  <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>

css样式

 <style>
     #menu{
      float: left;
      width: 120px;
      height: 350px;
     }
     #tupian{
      float: left;
     }
      li{
      float:left;
      width:100px;
      display:block;
      }
     li a{
      float:left;
      margin-left:0;
      display:block;
      line-height:35px;
      text-decoration:none;
       }
     li a:hover{
      color:red;
      }
    </style>

5.2.4淡入淡出的动画效果

方法	说明
fadeIn(speed,[callback])	通过增大不透明度实现匹配元素淡入的效果
fadeOut(speed,[callback])	通过减少不透明度实现匹配元素淡出的效果
fadeTo(speed,[callback])	将匹配元素的不透明度以渐进的方式调整到指定的参数

  $("#menu").hover(null,function(){
     $("#menu").hide(300);
    });
    $("#flag").mouseover(function(){
     $("#menu").fadeIn(1800);
    });
    $("#menu").hover(null,function(){
     $("#menu").fadeOut(1800);
    });

5.2.3切换元素的可见状态
使用toggle()方法可以实现切换元素的可见状态，也就是如果元素是可见的，切换为隐蔽：如果是隐藏的，可以换位可见。
语法格式：

toggle()

例：通过点击切换元素可见状态。

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

5.2.5滑动效果
1、滑动显示匹配的元素
使用sideDown()方法可以向下增加元素高度动态显示匹配的元素。slideDown()方法会逐渐向下增加匹配的元素的高度，直到元素完全显示为止。

sideDown(speed,[callback])

例

 <div>
   <div id="ad" style="display: none;">
    吉林省明日科技有限公司
   </div>
   明日图书
  </div>
  <script type="text/text/javascript">
   $(document).ready(function(){
    $("#ad").slideDown(1600);
   });
  </script>

5.2.6自定义的动画效果
1、使用animate()方法创建自定义方法
animate()方法的操作更加自由，可以随意控制元素的属性，实现更加绚丽的动画效果。
语法格式：

 animate(params,speed,callback)

params:表示一个包含属性和值的映射，可以同时包含多个属性。
speed：表示动画运行的速度，参数规则同其他动画效果的speed一致，他是一个可选参数。
callback：表示一个回调参数，当动画运行完毕后执行该回调函数，他也是一个可选参数。
例

 <script type="text/javascript">
   $(document).ready(function(){
    $("#fish").animate({left:300},1000)
    .animate({top:200},1000)
    .animate({left:0},200)
    .animate({left:0},200)
   })
  </script>

2、使用stop()方法停止动画
stop()方法也属于自定义函数，他会停止匹配元素正在进行的动画，并立即执行下一个动画。
语法格式：

stop(clearQueue,gotoEnd)

clearQueue:表示是否清空尚未执行的动画队列。
gotoEnd：表示是否让正在执行的动画直接到达动画结束时的状态。
例

 $("#btn").click(function(){
     $("#fish").stop(true,true);
    });

吴默涵1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫