jQuery自定义动画方法animate()

animate()方法执行CSS属性集的自定义动画，该方法会将一个属性在指定或者默认的时间内从一个属性值变化到另一个属性值，由于属性值是逐渐变化的，所以就形成了所谓的动画效果。
用法：

$(selector).animate({styles},speed,easing,callback);

参数说明：
styles:styles用来设置对象属性值的目标值，即需要将属性值变成什么状态或者大小。设置格式一个属性对应一个属性值。
如果同时设置多个属性值，需要用逗号连接。
如果属性值是数字型的，可以不加单位，如{'width':100} 但是如果要加上属性值单位，就要将属性值用引号包起来，如{'width':'200px'}。
speed:speed就是速度、多快的意思，就是对象属性值从当前的状态转换到你设置的另一个状态的变化时间，支持数字类型和字符串两种类型，数字类型可以不用引号，直接写数字，单位是毫秒。字符串是固定值'fast'、'normail'、'slow'，如果不写，默认就是'normal'。

easing:easing是描述这个动画设一个怎样的运行过程，'linear' 就是匀速的意思，即对象属性值从当前值变化到另一个值在固定的时间内是匀速变化的，而默认'swing'这个参数表示曲线形的运动模式，刚开始会慢慢运动，然后加速，最后减速。
callback：callback是一个回调函数表示在动画执行完毕以后去调用的一个函数，用了这个回调函数，我们可以实现让动画往复运行，即在回调函数里面再把对象属性值设置为初始状态，再利用循环定时器，可以完成，下面会给大家附带一个动画代码，就是用这种思想实现的。
自定义简单动画：

<head>
<style>
#wrap{position:relative;width:100px;height:100px;border:1px solid #0050D0;
}
</style>
</head>
<div id="panel">click me</div>
<script>
$(function(){$("#wrap").click(function(){$(this).animate({left:"500px"},3000);});
});
</script>

设置一个固定位置，一次性的完成
效果图：

2.累加、累减动画
将上例jQuery代码改为 (在500px之前加上"+=“或”-="，即表示在当前位置累加或者类减)


$(function(){$("#wrap").click(function(){$(this).animate({left:"+=500px"},3000);});
});

累加动画，点击一次执行位置的累加操作

3.多重动画
（1）同时执行多个动画
元素向右滑动的同时，高度也在增加。

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

（2）按顺序执行多个动画
元素先向右滑动，然后再增加它的高度。

$(function(){$("#wrap").click(function(){$(this).animate({left:"500px"},3000);$(this).animate({height:"200px"},3000);//或者改写成 $(this).animate({left:"500px"},3000).animate({height:"200px"},3000);});
});

动画效果的执行具有先后顺序，称为"动画队列"

综合动画
案例;单机div实现右移的同时增加高度，不透明度从50%到100%,然后从上到下移动，同时增加宽度。最后淡出。

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

5.动画回调函数
上一个例子中，若想在最后一步切换元素的css样式，而不是隐藏元素：

css（'border','5px solid blue'）;

如果只是按照常规的方式，将fadeOut(‘show’)改为css(‘border’,"5px solid blue");
并不能得到预期效果。预期的效果实在佛南规划的最后一步改变元素的样式，而实际的效果是，刚开始执行动画的时候，css()方法就被执行了。
产生问题的主要原因是因为css()方法并不会加入动画队列中，而是立即执行。可以使用回调函数（callback）对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数。

     $("#wrap1").click(function(){$(this).animate({left:"400px",heigth:"200px",opacity:"1"},3000).animate({top:"200px"},3000，function(){$(this).css("border","5px solid blue");})});

jQuery自定义动画方法animate()相关推荐

自定义动画方法animate()
1.自定义简单动画 animate()方法可以使元素动起来,而且animate()方法更具有灵活性.通过animate()方法,能够实现更加精细新颖的动画效果;使用animate()方法之前,为了能影 ...
jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...
jQuery动画（jQuery预制动画，jQuery自定义动画，jQuery停止动画和延迟动画）
目录 jQuery预制动画显示隐藏动画上拉下拉动画(高度动画) 淡入淡出动画(透明度动画) jQuery自定义动画 jQuery停止动画和延迟动画等 jQuery预制动画 jquery的预制动画 ...
jQuery自定义动画
首先创建一个新的html,在body下面输入源代码:div标签代表的是颜色的面板,button标签代表的是按钮当我们输入好了源代码之后呢,那我们的源代码部分已经完成了,接下来剩下的就只有css样式和 ...
jQuery—自定义动画
演示视频 // Html部分<button>操作属性</button><button>累加属性</button><button>关键字< ...
jquery自定义动画animate方法
示例效果: 示例代码: <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
jquery 自定义函数方法
总结: * jQuery中添加自定义或函数方法1,如 $.fn.extend({'aa':function(){}}) 或 jQuery.fn.aa=function(){}, 这种调用时就得这样,$ ...
jQuery自定义动画王者荣耀手风琴效果
分析: ①鼠标经过某个小li 有两步操作: ②当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 ③其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出 <!doctyp ...
【jQuery笔记Part2】05-jQuery自定义动画
jQuery自定义动画简介 animate() 使用操作多个属性使用相对值使用预定义的值通过连缀或者顺序来实现列队动画顺序写法连缀写法停止动画延时动画 jQuery笔记目录简介 j ...

jQuery自定义动画方法animate()

jQuery自定义动画方法animate()相关推荐

最新文章

热门文章