javaScript的一些奇妙动画

Posted 2020-09-22 那一刻~~~掩护你

     今天我给大家讲一下javascript在实现一些动画时所用的一些方法以及需要注意的地方。

　　

　　显示与隐藏动画效果

　　　show()方法:

　　　　　　show()方法会动态地改变当前元素的高度、宽度和不透明度，最终显示当前元素，此时元素的css属性display恢复为除了none之外的初始值。

　　　　　　　其语法结构为：jQuery对象.show(duration,[fn]); 其中要注意当参数duration表示动画效果运行的时间，可以使用关键字slow、normal和fast，分别对应时间长度0.6秒、0.4秒和0.2秒，此时参数要加引号；也可以使用数值，单位默认为毫秒，此时参数不需要加引号。

 

　　　　hide()方法：

　　　　　　　hide()方法会动态改变当前元素的高度、宽度和不透明度，最终隐藏当前元素，此时元素的css属性display修改为none。

　　　　　　　其语法结构为：jQuery对象.hide(duration,[fn]);

 

　　　对于显示和隐藏我给大家举个例子：

　　给页面添加一个“显示”按钮，当单击“显示”按钮时，将以动画的方式显示一幅图片，动画完成时执行函数，实现给显示的图片加上边框样式的功能。再一次单击按钮，显示的图片以动画的方式隐藏。

 

<style type="text/css">
img{
    display:none; /*图片默认不显示*/
} 
</style>
.......
 $(function(){
     $("#btn").click(function(){
         if($(this).val()=="显示"){
          $("#pic").show("slow",function(){
            $(this).css({"border":"1px solid #ccc","padding":"5px"});  
          } );
          $(this).val("隐藏")
         }else{
            $("#pic").hide("slow");
            $(this).val("显示"); 
          }
         });
 });

 

　          toggle()方法:

　　　toggle()方法除了可以模拟鼠标的连续单击事件之外，同时还会动态地改变当前元素的高度、宽度和不透明度，最终切换当前元素的可见状态。即如果元素是可见的，则被切换为隐藏状态；如果元素是隐藏的，则被切换为可见状态。

　　　其语法结构为:jQuery对象.toggle(duration,[fn]);