jquery animate实现图片轮换

发布时间:2020-05-20编辑:脚本学堂
本文介绍下,使用jquery中的animate函数实现图片轮换的方法,学习下jquery animate函数的用法,有需要的参考下。

jquery中,animate(params,speed,easing,callback) 用于创建自定义动画的函数。

该函数的关键在于指定动画形式及结果样式属性对象。
这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。
而每个属性的值表示这个样式属性到多少时动画结束。
如果是一个数值,样式属性就会从当前的值渐变到指定的值。
如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

params (Hash): 一组包含作为动画属性和终值的样式属性和及其值的集合
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing (String): (可选) 要使用的擦除效果的名称(需要插件支持).
callback (Function): (可选) 在动画完成时执行的函数
opacity:用来设置图片的透明度。

来看一个例子:
 

复制代码 代码示例:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>jquery animate图片轮换_脚本学堂_http://www.jb200.com</title>
     <script type="text/javascript" src="JS/alice.js"></script>     
    <style type="text/css">
         #box{
             background:green;
             height: 30px;
             width: 30px;
             position: relative;
             top:20;
             left:100%;
        }
</style>
   <script>
        $(document).ready(function() {
            $("div").hover(function() {
            $("#box")
              .animate({ opacity: "1", left: "400",top:"500",height:"50",width:"50"}, 1200)
              .animate({ opacity: "1", top: "20", height: "70", width: "70"}, "1000000")
              .animate({ opacity: "1", left: "20",top:"400", height: "100", width: "100" }, "slow")
             .animate({ top: "0" }, "fast")
             .slideUp()
             .slideDown("slow")
             return false;
          });
        });
    </script>
</head>
<body>
<div id="box">
</div>   
<body>
</html>
 

hover():相当于悬停事件,前面已经说过。
slideUp(speed, callback):通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数
这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。(在slideUp()中也可以不需传参数)
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000)
callback (Function): (可选) 在动画完成时执行的函数
例如:
1. $("p").slideUp("slow");
2. $("p").slideUp("slow",function(){ alert("Animation Done."); });
slideDown(speed, callback):和slideUp()用法一样,不同之处为slideDown()是向下增大。

Animate的用法:
 

复制代码 代码示例:
$(document).ready(function(){
   $("a").toggle(function(){
     $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
   },function(){
     $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
   });
});
<a href=http://www.jb200.com>
text
</a>
<div class="stuff">
animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )
用于创建自定义动画的函数。
</div>