jQuery特殊效果及动画

最新推荐文章于 2021-06-18 02:49:18 发布

yjx_43750162

最新推荐文章于 2021-06-18 02:49:18 发布

阅读量192

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_43750162/article/details/97619454

版权

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #div_01{
    width: 300px;
    height: 300px;
    background: deepskyblue;
    display: none;
   }
  </style>
  <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(function(){
    
    // 根据id 获取元素
    var $id=$('#div_01');
    var $btn1=$('#btn1');
    var $btn2=$('#btn2');
    $btn1.click(function(){
     $id.fadeIn(2000,'swing',function(){
      alert('淡入');
     })
    })
    $btn2.click(function(){
     $id.fadeOut(1000,function(){
      alert('淡出');
     })
    })
    $btn1.click(function(){
     // $id.fadeToggle(1000);  // 同时具备淡入和淡出
     // $id.show(1000); //显示
     //$id.hide(1000);//隐藏
     /*$id.slideDown(1000); // 向下展开
     $id.slideUp(1000); // 向上卷起
     // $id.slideToggle(2000);
    })
   })
  </script>
 </head>
 <body>
  <button id="btn1">点击淡入</button>
  <button id="btn2">点击淡出</button>
  <div id="div_01"></div>
 </body>
</html>

动画

animate(变化样式，过渡时间，速度，回调)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
  $(function(){
    // 1,获取页面中的元素
    var $div1=$('#div_01');

$div1.hover(function(){
     $id_div.animate({
      width:200,
      height:200,
      borderRadius:'50%',
      opacity:0.4
     },2000)
    })
    .hover(function(){
     $id_div.animate({
      width:'-=100',
      height:'-=100'
     },2000)
    });
  })
  </script>
 </head>
 <body>
  <div id="div_01" style="width: 20px; height: 20px; background: red;"></div>
 </body>
</html>