jquery动画效果学习笔记（8种效果）

前端技术 2023/09/09 JavaScript

1、元素的显示和隐藏

  • display:none; 隐藏
  • display:block; 显示

简单显示和隐藏方法

  • a) show() 显示
  • b) hide() 隐藏
  • c) toggle() 开关，显示则隐藏，隐藏则显示
<script type=\"text/javascript\">
  function f1(){
    //隐藏
    $(\"div\").hide();//display:none
    //document.getElementById(\'id\').style.display=\"none\";
  }
  function f2(){
    //显示
    $(\"div\").show();//display:block
  }
  function f3(){
    $(\"div\").toggle();
  }
</script>
<style type=\"text/css\">
   div {width:300px; height:200px; background-color:blue;}
</style>
 <body>
   <div>duck and dog</div>
   <input type=\"button\" value=\"隐藏\" onclick=\"f1()\" />
   <input type=\"button\" value=\"显示\" onclick=\"f2()\" />
   <input type=\"button\" value=\"开关效果\" onclick=\"f3()\" />
</body>

CSS支持两种方法显示和隐藏元素，即使用visibility或display样式，他们控制元素显示和隐藏的时候效果相同，但是结果却不同。
具体说明如下：

  • visibility 属性在隐藏元素的时候，同时会保存元素在文档流中的影响力，隐藏后元素的未知保持不变。该属性包括visible(默认)和hidden两个值。
  • display 隐藏后，隐藏的元素不再占用文档的位置。

2、滑动效果显示和隐藏

  • slideUp(speed[,callback]) 向上滑动元素并最终隐藏
  • slideDown(speed[,callback]) 向下滑动元素并最终显示
  • slideToggle(speed[,callback])

                     speed：设置效果的速度(slow（600）normal（400） fast（200） 时间(毫秒))
                     callback: 效果执行完毕之后自动调用的回调函数

<script type=\"text/javascript\">
  function f1(){
    //隐藏
    $(\"div\").slideUp(3000,function(){
      alert(\'我消失了，你能看到么\');
    });
  }
  function f2(){
    //显示
    $(\"div\").slideDown(3000,function(){
      alert(\'我又回来了\');
    });//display:block
  }
  function f3(){
    $(\"div\").slideToggle(1000);
  }
  $(function(){
    //气缸滑动效果
    //setInterval(\"f3()\",1000);
  });
</script>

<style type=\"text/css\">
div {width:300px; height:200px; background-color:blue;}
</style>


<body>
   <div>duck and dog</div>
   <input type=\"button\" value=\"隐藏\" onclick=\"f1()\" />
   <input type=\"button\" value=\"显示\" onclick=\"f2()\" />
   <input type=\"button\" value=\"开关效果\" onclick=\"f3()\" />
 </body>

3、淡入淡出效果

让元素通过一定透明度变化，达到显示和隐藏的效果

  • fadeIn(speed, [callback])
  • fadeOut(speed, [callback])
  • fadeToggle(speed, [callback])开关效果
  • fadeTo(speed, opacity, [callback]) 把div设置一定透明度（0-1）0.3就是30%透明度

<script type=\"text/javascript\"> 
  function f1(){
    //隐藏
    $(\"div\").fadeOut(4000);
  }
  function f2(){
    //显示
    $(\"div\").fadeIn(4000);
    $(\"#two\").fadeTo(2000,0.3);
  }

  function f3(){
    $(\"div\").fadeToggle(2000);
  }

</script>
<style type=\"text/css\">
  div {width:300px; height:200px; background-color:blue;}
</style>
<body>
  <div id = \"two\">duck and dog</div>

  <input type=\"button\" value=\"隐藏\" onclick=\"f1()\" />
  <input type=\"button\" value=\"显示\" onclick=\"f2()\" />
  <input type=\"button\" value=\"开关效果\" onclick=\"f3()\" />
</body>

设置透明度，div的透明度是30%：

4、动画效果底层方法animate()

show() hide() 等等动画效果内部都是执行animate()方法

$().animate(css效果参数[，时间][，回调函数]);

css()等一般jquery方法执行完毕之后会返回当前jquery对象，因此jquery的许多方法可以链式调用。

 <script type=\"text/javascript\">
  function f1(){
    //文字大小、文字粗体、div本身宽度和高度
    //font-size background-color color

    console.log($(\"div\"));
    //jquery对象调用完毕css方法本身还是一个jquery对象
    //说明css方法执行完毕有return this关键字
    console.log($(\"div\").css(\'font-weight\',\'bold\').css(\"background-color\",\'pink\')); 

    var jn = {\'font-size\':\'30px\',width:\'400px\',height:\'300px\'};
    $(\"div\").css(\'font-weight\',\"bold\").css(\"background-color\",\"pink\").css(\"color\",\"white\").animate(jn,2000);

    //$(\"div\").animate(jn,2000);
  }

</script>

<style type=\"text/css\">
  div {width:300px; height:200px; background-color:blue; }
</style>

<body>
  <div>duck and dog</div>
  <input type=\"button\" value=\"设置\" onclick=\"f1()\" />
</body>

5、累加累减动画

如果动画一次设定left：500 ,第一次单击div会左移500像素,第二次单击就不会动了。累加累减就是连续动的，只需要将left:”500px”改成left:”+=500px”或者left:”-=500px”即可。

(function(){ 
  $(\"#panel\").click(function(){ 
    $(this).animate({left: \"+=500px\"}, 3000); 
  }) 
})</span>

6、多重动画

1、同时执行多个动画
上面的例子只控制了left属性的变化，这回我们在控制left属性的时候同时控制元素高度变为200px

$(function(){ 
  $(\"#panel\").click(function(){ 
    $(this).animate({left: \"500px\",height:\"200px\"}, 3000); 
  }) 
})

2、顺序执行动画

上面例子中元素右移和放大高度两个动画是同时进行的。现在我们要实现先右移再放大高度，那很简单，只需要把上面的animate()方法拆开写成两个即可

$(function(){ 
  $(\"#panel\").click(function(){ 
    $(this).animate({left: \"500px\"},3000) 
       .animate({height:\"200px\"},1000); 
  }) 
})

3、综合动画

接下来完成更复杂的动画。单击div元素后让他向右移动的同时增大他的高度，并将它的不透明度从50%切换到100%。然后再让它从上向下移动，同时它的宽度变大，当完成这
些效果后让它以淡出的方式隐藏掉。

$(function(){ 
  $(\"#panel\").css(\"opacity\",0.5);//设置不透明度 
  $(\"#panel\").click(function(){ 
    $(this).animate({left: \"400px\",height:\"200px\",opacity:\"1\"},3000) 
       .animate({top:\"200px\",width:\"200px\"},3000) 
       .fadeOut(1000); 
  }) 
})

7、动画回调函数

在上例中，如果想在最后一步切换css样式而不是隐藏元素。这我们就可以用到animate的第三个参数回调函数了

$(function(){ 
  $(\"#panel\").css(\"opacity\",0.5);//设置不透明度 
  $(\"#panel\").click(function(){ 
    $(this).animate({left: \"400px\",height:\"200px\",opacity:\"1\"},3000) 
       .animate({top:\"200px\",width:\"200px\"},3000,function(){$(this).css(\"border\",\"5px solid blue\")}); 

  }) 
})

这样就把css方法加入到动画队列中了。

8、停止动画和判断是否处于动画状态

1、停止元素的动画

stop([clearQueue][,gotoEnd]) 两个都是可选参数，都是boolean类型
参数说明：

clearQueue：代表是否清空未执行完的动画队列
gotoEnd ：代表是否将正在执行的动画跳到末状态
通过一个综合的示例就可以弄明白stop()方法的这两个参数了：

<style type=\"text/css\"> 
  *{margin:0;padding:0;}  
  body { font-size: 13px; line-height: 130%; padding: 60px } 
  #panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;} 
  .head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;} 
  .content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;} 
</style> 
<script src=\"../../../scripts/jquery.js\" type=\"text/javascript\"></script> 
<script type=\"text/javascript\"> 
  $(function(){ 
     $(\"button:eq(0)\").click(function () { 
       $(\"#panel\") 
        .animate({height : \"150\" } , 2000 ) 
        .animate({width : \"300\" } , 2000 ) 
        .hide(3000) 
        .animate({height : \"show\" , width : \"show\" , opacity : \"show\" } , 2000 ) 
        .animate({height : \"500\"} , 2000 ); 
     }); 
     $(\"button:eq(1)\").click(function () { 
       $(\"#panel\").stop();//停止当前动画，继续下一个动画 
     }); 
     $(\"button:eq(2)\").click(function () { 
       $(\"#panel\").stop(true);//清除元素的所有动画 
     }); 
     $(\"button:eq(3)\").click(function () { 
       $(\"#panel\").stop(false,true);//让当前动画直接到达末状态 ，继续下一个动画 
     }); 
     $(\"button:eq(4)\").click(function () { 
       $(\"#panel\").stop(true,true);//清除元素的所有动画，让当前动画直接到达末状态  
     }); 

  }) 
</script> 

<body> 
  <button>开始一连串动画</button> 
  <button>stop()</button> 
  <button>stop(true)</button> 
  <button>stop(false,true)</button> 
  <button>stop(true,true)</button> 
  <div id=\"panel\"> 
    <h5 class=\"head\">三国杀杀天下</h5> 
    <div class=\"content\"> 
      夏侯惇的眼睛，陆逊的联营，郭嘉司马深深的基情 
    </div> 
  </div> 
</body> 
</html>

2、判断元素是否处于动画状态

当使用animate()方法的时候，要避免动画的累积导致的动画与用户的行为不一致的现象。当用户快速在某个元素上执行animate()动画时，就会出现动画累积。

解决办法是判断元素是否正在处于动画状态，当不处于动画状态的时候，才为元素添加新的动画。
用法：

if(!$(element).is(\":animated\")){ 
  //添加新的动画 
}

通过本文对8种jquery动画效果的详细剖析，玩转jquery动画效果，希望大家喜欢这篇针对jquery动画效果进行全面介绍的文章。

本文地址：https://www.stayed.cn/item/24529

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案