animate(params,options)
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。
注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
在 jQuery 12 中，你可以使用 em 和 % 单位。另外，在 jQuery 12 中，你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。
返回值
jQuery
参数
params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合
options (Options) : 一组包含动画选项的值的集合。
选项
duration (String,Number) : (默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing (String) : (默认值: "swing") 要使用的擦除效果的名称(需要插件支持)默认jQuery提供"linear" 和 "swing"
complete (Function) : 在动画完成时执行的函数
step (Callback) : Template:APICallback
queue (Boolean) : (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 12中新增)
示例
第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体，一旦字体改变完毕后，边框的动画才开始。
第二个按钮按了之后就是一个传统的链式动画，即等前一个动画完成后，后一个动画才会开始
HTML 代码:
<button id="go1">» Animate Block1</button>
<button id="go2">» Animate Block2</button>
<div id="block1">Block1</div><div id="block2">Block2</div>
jQuery 代码:
$("#go1")click(function(){
$("#block1")animate( { width: "90%"}, { queue: false, duration: 5000 } )
animate( { fontSize: '10em' } , 1000 )
animate( { borderWidth: 5 }, 1000);
});
$("#go2")click(function(){
$("#block2")animate( { width: "90%"}, 1000 )
animate( { fontSize: '10em' } , 1000 )
animate( { borderWidth: 5 }, 1000);
});
--------------------------------------------------------------------------------
用600毫秒切换段落的高度和透明度
jQuery 代码:
$("p")animate({
height: 'toggle', opacity: 'toggle'
}, { duration: "slow" });
--------------------------------------------------------------------------------
用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）
jQuery 代码:
$("p")animate({
left: 50, opacity: 'show'
}, { duration: 500 });
--------------------------------------------------------------------------------
一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数，这个参数才起作用。
jQuery 代码:
$("p")animate({
opacity: 'show'
}, { duration: "slow", easing: "easein" });
直接为大家介绍制作过程，希望大家可以喜欢。
HTML结构
该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素，divcd-cover-layer用于制作页面切换时的遮罩层，divcd-loading-bar是进行ajax加载时的loading进度条。
<main>
<div
class="cd-index
cd-main-content">
<div>
<h1>Page
Transition</h1>
<!--
your
content
here
-->
</div>
</div>
</main>
<div
class="cd-cover-layer"></div>
<!--
this
is
the
cover
layer
-->
<div
class="cd-loading-bar"></div>
<!--
this
is
the
loading
bar
-->
CSS样式
该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮罩层来遮住页面内容。它们的定位是固定定位，高度等于50vh，宽度为100%。默认情况下，使用CSS
transform属性将它们隐藏起来（translateY(-100%)/translateY(100%)）。当用户切换页面的时候，这些元素被移动回视口当中（通过在<body>元素上添加page-is-changing
class）。
下面的演示了这个过程：
页面切换特效
body::after,
body::before
{
/
these
are
the
2
half
blocks
which
cover
the
content
once
the
animation
is
triggered
/
height:
50vh;
width:
100%;
position:
fixed;
left:
0;
}
body::before
{
top:
0;
transform:
translateY(-100%);
}
body::after
{
bottom:
0;
transform:
translateY(100%);
}
bodypage-is-changing::after,
bodypage-is-changing::before
{
transform:
translateY(0);
}
页面切换时，页面内容的淡入淡出效果是通过改变divcd-cover-layer的透明度实现的。它覆盖了cd-main-content元素，并具有相同的背景色，然后在<body>被添加page-is-changing
class的时候，将透明度从0修改为1。
Loading进度条使用cd-loading-bar::before伪元素来制作。默认它被缩小（scaleX(0)）和transform-origin:
left
center。当页面切换开始时它被使用scaleX(1)放大会原来的尺寸。
cd-loading-bar
{
/
this
is
the
loading
bar
-
visible
while
switching
from
one
page
to
the
following
one
/
position:
fixed;
height:
2px;
width:
90%;
}
cd-loading-bar::before
{
/
this
is
the
progress
bar
inside
the
loading
bar
/
position:
absolute;
left:
0;
top:
0;
height:
100%;
width:
100%;
transform:
scaleX(0);
transform-origin:
left
center;
}
page-is-changing
cd-loading-bar::before
{
transform:
scaleX(1);
}
特效中平滑的过渡效果使用CSS
Transitions来实现。每一个动画元素都被添加了不同的transition-delay，以实现不同的元素动画顺序。
JAVASCRIPT
该页面切换特效中在链接上使用data-type="page-transition"属性，用于触发页面切换事件。当插件检测到用户点击事件，changePage()方法将被执行。
$('main')on('click',
'[data-type="page-transition"]',
function(event){
eventpreventDefault();
//detect
which
page
has
been
selected
var
newPage
=
$(this)attr('href');
//if
the
page
is
not
animating
-
trigger
animation
if(
!isAnimating
)
changePage(newPage,
true);
});
这个方法会触发页面切换动画，并通过loadNewContent()方法加载新内容。
function
changePage(url,
bool)
{
isAnimating
=
true;
//
trigger
page
animation
$('body')addClass('page-is-changing');
//
loadNewContent(url,
bool);
//
}
当新的内容被加载后，会替代原来<main>元素中的内容。page-is-changing
class被从body中移除，新加载的内容会被添加到windowhistory中（使用pushState()方法）。
function
loadNewContent(url,
bool)
{
var
newSectionName
=
'cd-'+urlreplace('html',
''),
section
=
$('<div
class="cd-main-content
'+newSectionName+'"></div>');
sectionload(url+'
cd-main-content
>
',
function(event){
//
load
new
content
and
replace
<main>
content
with
the
new
one
$('main')html(section);
//
$('body')removeClass('page-is-changing');
//
if(url
!=
windowlocation){
//add
the
new
page
to
the
windowhistory
windowhistorypushState({path:
url},'',url);
}
});
}
为了在用户点击浏览器的回退按钮时触发相同的页面切换动画效果，插件中监听popstate事件，并在它触发时执行changePage()函数。
$(window)on('popstate',
function()
{
var
newPageArray
=
locationpathnamesplit('/'),
//this
is
the
url
of
the
page
to
be
loaded
newPage
=
newPageArray[newPageArraylength
-
1];
if(
!isAnimating
)
changePage(newPage);
});
多个属性同时执行，时间相同：
$(this)find("left")stop()animate({"left": "200px",
"opacity": "0"
}, 300)
多个操作同时执行，时间不同：
$(this)find("left")stop()animate({"left": "200px"}, 300)animate({"opacity": "0"}, 100)$('pic1')hide(1000);
$('pic2')delay(1000)show(1000); delay(时间) 延时多少秒执行
<script src="jquery-171minjs"></script>
<script language="javascript">
windowonload=initial;
function initial(){
$('#pic2')hide();
$('#pic3')hide();
$('#pic4')hide();
picShow(1,2);
}
function picShow(last,next){
lastname='#'+("pic"+last);//需要消失的的选择器
nextname='#'+("pic"+next);//需要显示的的选择器
// $(lastname)hide(1000,function(){
// last<4$(nextname)show(1000,nextturn(next)):$('#pic1')show(1000,nextturn(next));
// });
$(lastname)hide(1000);
if(last<4)
{
$(nextname)delay(1000)show(1000);
setTimeout(function(){nextturn(next)},1000);
}
else
{
$('#pic1')delay(1000)show(1000);
setTimeout(function(){nextturn(next)},1000);
}
}
function nextturn(last){
last<4picShow(last,last+1):picShow(last,1);
}
</script>
欢迎分享，转载请注明来源：表白网
微信扫一扫
支付宝扫一扫
评论列表（0条）