jQuery之动画效果-阿里云开发者社区

通过一段代码来展示jQuery的动画效果。

1.show&hide

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
         $(this).next().hide();
    },function(){
         $(this).next().show();
    })
})
</script>

html代码部分：

<body>
<div id="panel">
    <h5 class="head">什么是jQuery?</h5>
    <div class="content">
        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    </div>
</div>
</body>

toggle()

用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

2.show&hide带时间，可以加入一个时间参数

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
         $(this).next().hide(600);
    },function(){
         $(this).next().show(600);
    })
})
</script>

3.fadeOut&fadeIn 注意大小写，javascript是区分大小写的。

fadeOut()通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

fadeIn()通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
         $(this).next().fadeOut();
    },function(){
         $(this).next().fadeIn();
    })
})
</script>

4.slideUp&slideDown

slideUp()通过高度变化（向上减小）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

slideDown()通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

<script type="text/javascript">
$(function(){
    $("#panel h5.head").toggle(function(){
         $(this).next().slideUp();
    },function(){
         $(this).next().slideDown();
    })
})
</script>

5.animate简单应用

<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
       //css中div必须设置为position:relative。才有效果。
       $(this).animate({left: "500px"}, 3000);
    })
})
</script>

点击panel，会向右移动500px，时间为3秒钟。这其实是动态的调整它的位置。这要结合css来实现。因为只有position设为了relative，left属性才会有效。

6.animate多重动画

<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
        $(this).animate({left: "500px",height:"200px"}, 3000);
    })
})
</script>

这段代码的意思，是使panel向右移动的同时，高度变为200px。这里用了两个参数。

<script type="text/javascript">
$(function(){
    $("#panel").click(function(){
         $(this).animate({left: "500px"}, 3000)
                .animate({height: "200px"}, 3000);
    })
})
</script>

这段代码与上面有所不同，它不是同时变化的，它是由先后顺序的，先是panel向右移动500px，然后高度变为200px。

<script type="text/javascript">
    $(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("slow");
        });
    });
</script>

这段代码更为复杂一点。先是通过css方法设置panel的透明度为0.5，也就是半透明。然后是先让panel向右移动400px，高度变为200px，透明度变为1，也就是不透明。然后再向下移动200px，宽度变为200px，最后慢慢的淡出。fadeOut("slow")就是淡出的意思。这里的参数可以是数字表时间，也可以是字符串‘slow’，‘fast’表快慢。

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

这段代码最后有一段css效果。它并不是最后执行的。也就是它并没有排队，从一开始就是border为5px solid blue的效果。可以调整代码如下：

<script type="text/javascript">
    $(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");
                     })
                     
        });
    });
</script>

animate(params,[speed],[easing],[fn])。animate最后一个参数是一个函数，它表示等动画执行完毕执行的动作。在这个函数中，设置css就可以实现css的最后执行。

7.stop

stop() 方法停止当前正在运行的动画。

<script type="text/javascript">
$(function(){
      $("#panel").hover(function() {
          $(this).animate({height : "150",width : "300"} , 200 );
      },function() {
          $(this).animate({height : "22",width : "60" } , 300 );
      });
});
</script>

这段代码表示当鼠标浮于panel之上时，会让高度和宽度变大。当鼠标离开后，高度宽度变小。如果鼠标快速的移动移出就会有一个问题。就是它会一遍一遍的执行动作，直到动作完成。有一定的滞后效应。如何避免这一滞后效应呢？

我们可以通过stop() 方法。代码如下：

<script type="text/javascript">
$(function(){
      $("#panel").hover(function() {
          $(this).stop().animate({height : "150",width : "300"} , 200 );
      },function() {
          $(this).stop().animate({height : "22",width : "60" } , 300 );
      });
});
</script>

也就是在执行动作之前，先结束上一个动作，这样就能避免快速移动移出后的滞后效果。

stop([clearQueue],[jumpToEnd])
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。

8.还有一些连在一起的动作。

<script type="text/javascript">
$(function(){
    $("#panel h5.head").click(function(){
         $(this).next().toggle();
    })
})
</script>

toggle()切换消失与出现

<script type="text/javascript">
$(function(){
    $("#panel h5.head").click(function(){
         $(this).next().slideToggle();
    })
})
</script>

slideToggle()切换上下帘效果

<script type="text/javascript">
$(function(){
    $("#panel h5.head").click(function(){
         $(this).next().fadeTo(600, 0.2);
    })
})
</script>

fadeTo()把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

9.animate方法模仿各种效果。

<script type="text/javascript">
$(function(){
      $("button:eq(0)").click(function () {
          $("div.content").hide().animate({ opacity : "1" }  );//隐藏元素并取消透明度
      });
      
      $("button:eq(1)").click(function () {
          $("div.content").animate({height : "show" , width : "show" , opacity : "show" } , 600 );//用animate仿show(),原理就是高、宽、透明度都显示
      });

      $("button:eq(2)").click(function () {
        $("div.content").animate({height : "show" } , 600 );//用animate仿slideDown()
      });

      $("button:eq(3)").click(function () {
          $("div.content").animate({ opacity : "show" } , 600 );//用animate仿fadeIn()
      });

      $("button:eq(4)").click(function () {
            $("div.content").animate({ opacity : "0.2" } , 600 );//用animate仿fadeTo()
      });
})
</script>

jQuery之动画效果

热门文章

最新文章

相关课程

相关电子书

相关实验场景