前面的hide/show,slide in/out其实也具有动画效果,本篇介绍使用animate()实现自定义动画效果 。
基本语法如下:
$(selector).animate({params},speed,callback);
必选的参 数为params,定义CSS用于动画效果的的属性。
可选参数speed给出了淡入效果的时间,可以使用 “slow”,”fast” 或是数值(微秒)
第二个可选参数为回调函数,在animate()方法结束后调用。
比如下面的例子,将一个<center>标记移动到其Left属性等于 250px.
$("button").click(function(){ $("center").animate({left:'250px'}); });
要注意的是,缺省情况下,所有HTML元素的位置的固定的,不能移动,因此如果需要修改 HTML元素的位置,需要事先将它们的CSS属性的位置设置为relative, fixed, 或absolute。
使 用animate 修改多个属性
下面的例子,可以使用animate同时修改多个属性:
$("button").click(function(){ $("center").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); });
注意:基本所有的CSS属性都可以在animation中使用,颜色修改不在jQuery核心库中,需 要Color Animiation插件来完成。
使用属性相对值
对于CSS属性,除了上面使用的绝对大小 ,也可以使用相对值来定义,使用 “+”“-”。
$("button").click(function(){ $("center").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });
使用预定义的值
也可以使用预定义的值为属性赋值。比如”show”, “hide”, 或 “ toggle”:
$("button").click(function(){ $("center").animate({ height:'toggle' }); });
使用队列功能
缺省jQuery支持将多个animation功能串起来构从一个队列,然后一个一 个的执行队列中的指令。
比如:
$("button").click(function(){ var center=$("center"); center.animate({height:'300px',opacity:'0.4'},"slow"); center.animate({width:'300px',opacity:'0.8'},"slow"); center.animate({height:'100px',opacity:'0.4'},"slow"); center.animate({width:'100px',opacity:'0.8'},"slow"); });
或
$("button").click(function(){ var center=$("center"); center.animate({left:'100px'},"slow"); center.animate({fontSize:'3em'},"slow"); });
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索button
, animate
, function
, 属性
, 效果
, center
, jquery修改css属性
, 动画队列
, jquery自定义动画
animate()
jquery动画效果、jquery动画效果大全、jquery动画效果插件、jquery旋转动画效果、jquery div动画效果,以便于您获取更多的相关知识。