JQuery中的动画

一、show()方法和hide()方法

  这两种方法是jQuery动画的最基本方法。当为元素调用show方法时相当于将该元素的display样式改为block或者inline,同理,如果当元素调用hide方法时,相当于将该元素的样式改为none;因此:$("element").hide()等同于$("element").css("display","none");

ps:hide()方法在将内容的display属性设置为none之前,会记住原先的display属性(除了none之外的值),当调用show()方法是,会根据hide()方法记住的display属性来显示元素。

show()方法和hide()方法在没有带任何参数的情况下,作用是立即显示或者隐藏匹配的元素,不会有任何动画。如果希望元素能动起来,我们可以为其指定一个速度参数,如$("element").hide("fast")这里的fast是一个速度关键字,记住使用关键字时都要给它加上引号,一共有3个速度关键字:fast==200毫秒,normal==400毫秒,slow==600毫秒。不仅如此我们还可以显示的指定一个具体的数值,单位是毫秒。如$("element").hide(1000);

show()和hide()方法在执行过程中会同时增加/减少内容的高度,宽度和不透明度,直到它们完全显示或消失。

二、fadeIn()方法和fadeOut()方法

与show()方法不同的是,fadeIn()方法和fadeOut()方法只改变元素的不透明度。

   fadeOut()方法指在指定的一段时间内降低元素的不透明度,直到元素完全消失。fadeIn()则刚好相反。(经常搞混这两个那个是显示哪个是隐藏,这么记:我们叫人出去一般都吼out,然后他就消失了,当你对一个人说come in,他就出现在你面前了)

三、slideUp()方法和slideDown()方法

    slideUp()方法和sildeDown()方法指在一段时间内改变元素的高度。slideUp()方法呢是指匹配的元素从下往上慢慢消失。slideDown()呢是指匹配的元素从上往下慢慢显示;这个还比较好记。

四、自定义动画方法animate()

在很多情况下,上面的三种方法无法满足用户的各种需求,那么久需要对元素有更多的控制,在jQuery中可以使用animate()方法来自定义动画;其语法结构:

animate(params,speed,callback);
//params:一个包含样式属性及值的映射,比如{property1:"value1",property2:"value2",....}
//speed:速度参数,可选。 
//callback:在动画完成时执行的函数,可选

 这里来详细了解哈callback的用法。如以下代码:

其实这段代码的本意是:在点击a元素后,让该元素在3秒内先向距左200px,同时高度改为300px,不透明度变为1,然后完成上面的动作后该元素在又一个3秒内距上200px,高度变为300px,最后在为该元素设置border。但是上面的代码并不能够达到预期的值,实际上在刚开始执行动画的时候,css()方法就执行了,原因是css()方法并不会出现在动画队列中,而是立即执行,那么怎么改动代码才能实现预期的效果呢?这是就可以使用回调函数了。如下:

$(function(){
   $("#a").click(function(){
       $(this).animate({left:"200px",height:"300px",opacity:"1"},3000)
                 .animate({top:"200px",width:"300px"},3000,function(){
                       $(this).css("border":"5px solid blue");
})   
  }}
})

它的作用就是在前面的动画执行完成后,才开始做function内的事情。

PS:callback回调函数适用于jQuery所有的动画效果方法。

五、停止动画和判断是否处于动画状态

   很多时候都需要停止匹配元素正在进行的动画,如果需要某处停止动画,需要使用stop()方法,其语法结构:stop([clearQueue],[gotoEnd]);其中clearQueue和gotoEnd()都是可选参数,它们均为Boolean值,其中clearQueue代表是否要清空未执行的动画队列,gotoEnd代表是否将正在执行的动画跳转到末状态。当然如果直接使用stop()方法,则会立即停止当前正在进行的动画,如果接下来还有动画等待继续,则以当前状态开始接下来的动画。 

六、判断元素是否处于动画状态

    在使用animate()方法的时候,要避免动画积累而导致的动画与用户的行为不一致,当用户快速在某个元素上执行animate()动画时,就会出现动画积累。解决的方法是判断元素是否处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,否则不添加。代码如下:

if(!$(element).is(":animate")){
      //如果当前元素没有进行动画,则添加新动画
}
//这个判断方法经常在animate()动画中被使用,所以需要特别注意

七、延迟动画

    在动画执行过程中如果想对动画进行延迟操作,那么可以调用delay()方法。使用方法如下:

$(this).animate({left:"400px",height:"200px"},3000).delay(1000)

 delay()方法允许我们将队列中的函数延时执行,它既可以推迟动画队列中函数的执行,也可以自定义队列。

八、其他动画方法

     除了上面的提到的方法以外,jQuery中还有4个专门用于交互的动画方法。toggle(speed,[callback]),slideToggle(speed,[easing],[callback]),fadeTo(speed,opacity,[callback]),fadeToggle(speed,[easing],[callback]).

     (1)toggle()方法:它可以切换元素的可见状态,如果元素可见,则切换为隐藏,如果元素隐藏,则切换为显示。实际上:

$("#a").click(function(){
      $(this).next().toggle();
})

//等价于
 
$("#a").toggle(function(){
      $(this).next().show();
},function(){
      $(this).next().hide();
})
//这种写法在1.9版本的jQuery库里会出现问题

 总结:

(1)一组元素上的动画效果

    当在一个animate()方法中应用多个属性时,动画时同时发生的。当以链式的写法应用动画方法时,动画是按照顺序发生的(除非queue的选项值为false)

(2)多组元素上的动画效果

    默认情况下,动画都是同时发生的。当以回调的形式应用动画时(包括动画的回调函数和queue()方法的回调函数),动画是按照回调顺序发生的。

另外,在动画方法中要考虑其他非动画方法会会插队,例如css()方法,要使非动画方法也按照顺序执行,需要把这些方法写在动画方法的回调函数中或者queue()方法中。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

jQuery中prop和attr的区别

HTML5学堂:本文介绍了prop和attr的区别。jQuery中有这么两个东西 —— attr()与prop(),很多开发者在使用时,经常容易混淆,今天HTM...

3939
来自专栏前端儿

JS设置CSS样式的几种方式

如果属性有'-'号,就写成驼峰的形式(如textAlign)  如果想保留 - 号,就中括号的形式  element.style['text-align'] =...

2882
来自专栏菩提树下的杨过

silverlight中的几个冷门标记 {x:Null},d:DesignWidth,d:DesignHeight

{x:Null}:用于设置某属性值为Null,比如<Rectangle Fill="{x:Null}" />,其实就相当于<Rectangle />,个人感觉这...

2036
来自专栏编程坑太多

javascript图片无限懒加载

1503
来自专栏deepcc

css实现强制不换行/自动换行/强制换行

4438
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

2.2.2 HTML标签简介

HTML(HyperText Mark-up Language)是由HTML标签嵌套和组合的描述性文本,HTML标签可以描述文本(p,div等)、表格(tabl...

1312
来自专栏landv

用C语言实现窗口抖动

1756
来自专栏九彩拼盘的叨叨叨

学习前端 第5周 第4天

913
来自专栏前端知识分享

第27天:js-表单获取焦点和数组声明遍历

1、this指事件的调用者 2、input.value 表单更换内容 3、innerHTML更换盒子里的内容,文字、标签都能换。 4、isNaN("12")如果...

1672
来自专栏Modeng的专栏

Vue2.5笔记:Class与Style几种绑定用法

在我们的项目开发中给元素添加/删除 class 是非常常见的行为之一, 例如我们的网站导航都会给选中项添加一个 active 类用来区别选与未选中的样式,除了...

1581

扫码关注云+社区

领取腾讯云代金券