show()和hide()
$(function(){
$('#panel h5.head').toggle(function(){
$(this).next('div.content').hide();
},function(){
$(this).next('div.content').show();
})
})
hide()在将"内容"的display属性值设置为"none"之前，会记住原先的displat属性值。当调用
show()时，就会根据hide()方法记住的display属性值来显示元素。
jquery做动画效果要求在标准模式下，否则可能会引起动画抖动。即包含如下的dtd定义:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.O Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.show()和hide()让元素动起来
指定一个速度关键字
$("element").show("slow");//元素在 600毫秒后慢慢显示出来
其他的速度关键字还有"normal"和"fast"(长度是400毫秒和200毫秒)
也可以指定一个数字
$("element").show(1000);
3.fadeIn()和fadeOut()
改变元素的不透明度
fadOut()会在指定一段时间内降低元素的不透明度，直到元素完全消失(displat:none).fadeIn
()则相反
$(function(){
$('#panel h5.head').toggle(function(){
$(this).next('div.content').fadeOut();
},function(){
$(this).next('div.content').fadeIn();
})
})
4.slideUp()和slideDown()
改变元素的高度.如一个元素的display属性值为"none",当调用slideDown()时，这个元素将由上
至下延伸显示。slideUp()则正好相反
$(function(){
$('#panel h5.head').toggle(function(){
$(this).next('div.content').slideUp();
},function(){
$(this).next('div.content').slideDown();
})
})
自定义动画方法 animate()
animate(params,speed,callback);
参数说明：
params:一个包含样式属性及值的映射，比{property1:'v1',property2:'v2'}
speed:速度参数，可选
callback:在动画完成时执行的函数，可选
1.自定义简单动画
html:
<div id="panel"></div>
css
#panel{
position:relative;
width:100px;
height:100px;
border:1px solid #0050D0;
background:#96E555;
cursor:pointer;
}
为了使元素动起来，要更改元素的left样式属性。为了能影响该元素的top,left.bottom,right
样式属性，必须先把元素的position样式设置为'realtive'和'absolute'
$(function(){
$("#panel").click(function(){
$(this).animate({left:'500px'},3000);
})
})
先为id为'panel'的元素创建一个单击事件，然后对元素加入animate()方法，使元素在3秒内，
向右移动500像素
2.累加，累减动画
$(function(){
$("#panel").click(function(){
$(this).animate({left:'+=500px'},3000); //在当前位置累加500px
})
})
3.多重动画
同进执行多个动画
在元素向右滑动时，同时放大元素的高度
$(function(){
$("#panel").click(function(){
$(this).animate({left:'500px',height:'200px'},3000);
})
})
按顺序执行多个动画
动画效果的执行具有先后顺序，称为"动画队列"
$(function(){
$("#panel").click(function(){
$(this).animate({left:'500px',height:'200px'},3000);
$(this).animate({height:'200px'},3000);
})
})
综合动画
单击<div>元素后让它向右移动的同时增大它的高度，并将它的不透明度从50%变换成100%,然后
再让它从上到下移动，同时它的宽度变大，当完成效果后，以淡出方式隐藏。
$(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');
})
})
动画回调函数
css()方法并不会加入到动画队列中
$(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');
})
})
})
停止动画和判断是否处于动画状态
1.停止元素的动画
如需要在某处停止动画，需要使用stop()方法
stop([clearQueue][,gotoEnd]);
为boolean值，
clearQueue:是否清空未执行完的动画队列
gotoEnd:是否直接将正在执行的动画跳转到末状态
如直接使用stop(),则会立即停止当前正在进行的动画，如接下来还有动画等待继续进行，则以
当前状态开始接下来的动画。
$('#panel').hover(function(){
$(this).stop().animate({height:'150',width:'300'},200);
},function(){
$(this).stop().animate({height:'22',width:'60'},300);
})
如果是组合动画:
$('#panel').hover(function(){
$(this).stop(true).animate({height:'150'},200);
.animate({width:'300''},300);
},function(){
$(this).stop(true).animate({height:'22'},300);
.animate({width:'60''},300);
})
gotoEnd可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前
一个动画的末状态的情况，可能通过stop(false,true)让当前动画直接到达末状态。
判断元素是否处于动画状态
为了避免动画积累而导致的动画与用户的行为不一致
if(!$(element).is(':animated')){ //判断是否正处于动画状态
}
分享到：
相关推荐
jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画jquery动画
在网页设计中，jQuery是一种广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。在本教程中，我们将探讨“jQuery旋转动画按钮”的实现，这可以为网页添加交互性和视觉吸引力。 ...
"jQuery文字动画特效插件"就是这样一款工具，它利用jQuery库的强大功能，结合animate.css，为网页中的文字元素添加丰富的动画效果，使得文字不再是静态的，而是充满活力与动感。 ### jQuery库 jQuery是一款广泛...
Demo通常包含HTML、CSS和JavaScript文件，通过查看和修改代码，你可以深入理解jQuery动画的工作原理，并将其应用到自己的项目中。 通过实践和实验，你会发现jQuery的动画功能不仅可以提升用户体验，还能为网页设计...
二、jQuery动画 jQuery提供了多种内置的动画方法，如fadeIn(), fadeOut(), slideUp(), slideDown()等，可以方便地创建平滑的过渡效果。此外，还可以使用animate()方法自定义动画效果，包括改变宽度、高度、透明度等...
本文将详细探讨JQuery动画的实现原理，通过对关键知识点的剖析，帮助读者更好地理解和应用JQuery中的动画功能。 #### 二、动画的基本概念 动画的本质是视觉上的变化效果，通过快速连续地展示一系列微小的变化，形成...
"jQuery个性动画二级下拉导航菜单"就是一个专为提升用户体验而设计的交互式菜单方案。这个项目利用了JavaScript库jQuery 1.8.3的强大力量，结合精心设计的动画效果，为用户提供了直观且吸引人的二级下拉菜单。 ...