jquery中的动画

最新推荐文章于 2025-03-06 10:12:18 发布

pengpeng11

最新推荐文章于 2025-03-06 10:12:18 发布

阅读量159

点赞数

分类专栏： jQuery学习笔记文章标签： jQuery CSS XHTML ViewUI

jQuery学习笔记专栏收录该内容

7 篇文章

订阅专栏

本文介绍了jQuery中的动画效果实现方法，包括基本的show()和hide()、渐变效果fadeIn()和fadeOut()、高度变化动画slideUp()和slideDown()等。此外还详细讲解了如何使用animate()方法来自定义动画，包括累加、累减动画、多重动画以及动画队列的管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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')){ //判断是否正处于动画状态
}