你的位置：Jhonse技术博客 - 关注技术资讯以及技术文章的IT博客 > 技术文章 > JQuery > 【JQuery】动画与效果

【JQuery】动画与效果

JQuery jhonse 2年前 (2013-12-21) 864浏览

1.基本效果

匹配元素从左上角开始变浓变大或缩小到左上角变淡变小

①隐藏元素

除了可以设置匹配元素的display:none外,可以用以下函数

hide(speed,[callback]) 返回值:jQuery 参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number callback:在完成动画时执行的函数,每个匹配元素执行一次

slow=600毫秒 normal=400毫秒 fast=200毫秒

以优雅的动画隐藏所有匹配的元素,并在隐藏完成后可选的触发一个回调函数。

②显示元素

show(speed,[callback]) 以优雅的动画显示所有匹配的元素,并在显示完成后可选的触发一个回调函数。

③交替显示隐藏

toggle(speed,[callback]) 以优雅的动画切换匹配元素的可见状态,原来可见切换为不可见,原来不可见切换为可见。

<input type="button" value="hide()" /> <input type="button" value="show()" /> <input type="button" value="toggle()" /> <div></div> $(function(){ $("#hide1").click(function(){$("#1").hide(700)}); $("#show1").click(function(){$("#1").show(700)}); $("#toggle1").click(function(){$("#1").toggle(700)}); }) 2.滑动效果

①向上收缩效果

slideUp(speed,[callback]) 通过高度的变化方式向上隐藏元素,并在隐藏完成后可选的触发一个回调函数。

②向下展开效果

slideDown(speed,[callback]) 通过高度的变化方式向下显示元素,并在显示完成后可选的触发一个回调函数。

③交替伸缩效果

slideToggle(speed,[callback])切换匹配元素的高度的方式来改变可见状态,原来可见切换为不可见,原来不可见切换为可见。

$("#slideup1").click(function(){$("#1").slideUp(700)}); $("#slidedown2").click(function(){$("#1").slideDown(700)}); $("#slidetoggle").click(function(){$("#1").slideToggle(700)});

3.淡入淡出效果

通过控制匹配元素的不透明度来实现元素的显示与隐藏

①淡入效果

fadeIn(speed,[callback]) 通过不透明度的变化逐渐将匹配元素显现出来

$(“#fadein”).click(function(){$(“#1”).fadeIn(“slow”)});

②淡出效果

fadeOut(speed,[callback]) 通过不透明度的变化逐渐将匹配元素隐藏起来

③自定义不透明度

淡入或淡出的最终结果为自定义的透明度

fadeTo(speed,opacity,[callback]) opacity的值域是0～1之间

4.自定义动画效果

①自定义动画

animate(params,duration,[easing],[callback]) 返回值:jQuery 参数-params:一个包含类似CSS样式设置的json对象,该对象决定了匹配元素要变成什么样子,如:{height:”100%”,width:”70%”,fontSize:”4em”,color:”white”}但这些样式属性的名字与CSS的命名不同,它们使用骆驼命名法如fontSize 而在CSS中是font-size duration:类似于前面几个函数的speed参数,表示匹配元素从开始变化到最终结束变化的时长,其值的设置也一样String,Number easing:这个不太明白,要使用的擦除效果的名称(需要插件支持),默认jQuery提供linear和swing|String callback:和前面一样

这个函数可不像看上去那么简单,有几点需注意1.既然该函数是将匹配元素从原来样子变化成函数中params参数中设置的样子,那么就必须有原来的样子,即params中设置的样式属性必须在原来的样子中有设置过,不能本来没有设置border,却在params中这样设置{borderStyle:”solid”,borderWidth:”1px”} 2.就是前面提到过的样式属性的骆驼命名法 3.有些样式属性animate是不支持的,即便你在原来的样子里有设置过,比如background-color,在params中不能想当然的就设置了backgroundColor样式属性。

<div> 用户名:<input type="text" /><br /> 密码:<input type="password" /></div> $(function(){ $("#3").mouseover(function(){$(this).stop().animate({left:"0px"}) }).mouseout(function(){$(this).stop().animate({left:"-180px"},3000)}) }) ②jQuery动画队列

把针对某个匹配元素的多个动画操作放入一个队列中进行管理,这是默认设置,这样队列中的动画会按先后顺序一个一个执行

如果不希望某个动画按顺序执行,而是希望它最先执行,可以如下设置animate()函数,这是animate函数的有一种写法,它将除parmas以外的参数也用一个json对象来表示

$(“#id”).animate(parmas,{queue:false,duration:1000}).animate(parmas,{queue:false,duration:1000})

以上俩动画会同时执行,总耗时1秒,而

$(“#id”).animate(parmas,{duration:1000}).animate(parmas,{duration:1000})

这俩动画会一个一个执行,总耗时2秒

转载请注明：Jhonse技术博客 - 关注技术资讯以及技术文章的IT博客 » 【JQuery】动画与效果

继续浏览有关