jquery中的动画

lemo

浏览: 91649 次
性别:
来自: 北京

最近访客更多访客>>

waterfire119

hysun

jboss0324

满长安

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery学习笔记

jQuery CSS XHTML

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中的ajax | 在tomcat和resin下使用<select>标签时的问 ...

2010-03-18 13:31
浏览 1562
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论