jQuery中的动画

【show()方法和hide()方法】

在HTML文档中,为一个元素调用hide()方法,会将该元素的display样式改为“none”,show()方法将元素的display样式改为先前的显示状态。

$(function(){
$("#pane1 h5.head").toggle(function(){
$(this).next().hide();
}.function(){
$(this).next().show();
});
});

用jQuery做动画效果要求要在标准模式下,否则可能会引起动画抖动。

让元素动起来

如果希望在调用show()方法时,元素慢慢的显示出来,可以为show()方法指定一个速度参数。如,指定一个速度关键字“slow”

$("element").show("slow");

运行该代码后,元素将在600毫秒内慢慢地显示出来,还有其他关键字“normal”和“fast”。还可以为显示速度指定一个数字,单位是毫秒。

【fadeIn()方法和fadeOut()方法】

此方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度,知道元素完全消失,fadeIn()则相反。

$(function(){
$("#pane1 h5.head").toggle(function(){
$(this).next().fadeOut();
}.function(){
$(this).next().fadeIn();
});
});

【slideUp()方法和slideDown()方法】

此方法只会改变元素的高度。如果一个元素的display属性值为“none”,当调用slideDown()方法时,这个元素将由上至下延伸显示。slideUp()方法正好相反。

【自定义动画方法animate()】

语法结构:animate(params,speed,callback);

参数说明:params:一个包含样式属性及值的映射,比如{property:"value1",property2:"value2",.....}。

    speed:速度参数,可选。

    callback:在动画完成时执行的函数,可选。

自定义简单动画:

$(function(){
$("pane1").click(function(){
$(this).animate({left:"500px"},3000);
});
});

作用:使元素在3秒内,向右移动500像素。且css代码中设置的是“position:relative”。

累加、累减动画:在500px之前加上“+=”或者“-=”符号即可表示在当前位置累加或者累减。{left:"+=500px",3000};

多重动画

(1)同时执行多个动画:

$(function(){
$("myImg").click(function(){
$(this) .animate({left:"500px",height:"200px"},3000); //<div>元素在向右滑动同时,也会放大高度
});
});

(2)按顺序执行多个动画:只需要把代码拆开,然后按照顺序写。

$(this).animate({left:"500px"},3000);
$(this).animate({height:"500px"},3000);
//也可以改为链式写法
$(this).animate({left:"500px"},3000);
.animate({height:"500px"},3000);

综合动画

【动画回调函数】

可以使用回调函数(callback)对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可:

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

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

【停止动画和判断是否处于动画状态】

停止元素的动画:stop()方法。语法结构:stop([clearQueue],[gotoEnd]);参数clearQueue和gotoEnd都是可选参数,为Boolean值。clearQueue代表是否要清空未执行完的动画队列,gotoEnd代表是否直接将正在进行的动画跳转到末状态。

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

if(!$(element).is(":animated")){   //判断元素是否正处于动画状态
//如果当前没有进行动画,则添加新动画
}

延迟动画:delay()方法。可以将队列中的函数延迟执行。它既可以推迟动画队列中函数的执行,也可以用于自定义队列。

【其他动画方法】

toggle()方法:切换元素的可见状态。

slideToggle()方法:通过高度变化来切换匹配元素的可见性。

fadeTo()方法:可以把元素的不透明以渐进方式调整到指定的值。

fadeToggle()方法:通过不透明度来切换匹配元素的可见性。

【动画方法概括】

特别注意animate()方法,可以使用它来替代其他所有的动画方法。详情在《锋利的jQuery》P132页。

jQuery(5)——动画的更多相关文章

  1. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  2. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  3. jQuery实现动画过程中尽量避免出现网页滚动条

    jQuery实现动画过程中尽量避免出现网页滚动条,不然可能会出现动画效果异常.

  4. jQuery Easing动画效果扩展(转)

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  5. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  6. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  7. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  8. jQuery 停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...

  9. 放弃使用jQuery实现动画

    在Web开发的圈子里,开发人员经常觉得CSS动画是一种高性能web动画技术.假设想让网页载入的更快一些,就应该用纯CSS动画.事实上这样的观点是错误的,非常多开发人员早就放弃了javascript的动 ...

  10. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

随机推荐

  1. 安装javajava整合Flex

    PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 这几天在学一个叫Flex的东西,之前也没搞过这一类的东西认为既神秘又生疏,随 ...

  2. IFE-20 笔记

    将字符串按符号分割成数组 var str = 'aa,43,rt,55'; var arr = str.split(/[^0-9a-zA-Z\u4e00-\u9fa5]+/) //arr = [aa ...

  3. In-Memory:内存优化数据的持久化和还原

    数据持久化是还原的前提,没有数据的持久化,就无法还原内存优化表的数据,SQL Server In-Memory OLTP的内存数据能够持久化存储,这意味着内存数据能够在SQL Server实例重启之后 ...

  4. SQLite 约束

    约束是在表的数据列上强制执行的规则.这些是用来限制可以插入到表中的数据类型.这确保了数据库中数据的准确性和可靠性. 约束可以是列级或表级.列级约束仅适用于列,表级约束被应用到整个表. 以下是在 SQL ...

  5. elasticsearch最佳实践

    创建索引 无mapping 创建索引名称为index的索引 curl -XPUT http://localhost:9200/book 有mapping 如果需要定义每个类型的结构映射,创建type名 ...

  6. WPF wpf scrollviewer 触屏滚动 窗体弹跳

    触屏滚动实现 设置属性  在ScrollViewer的xaml代码那里加上 PanningMode="Both" 在ScrollViewer的xaml代码那里加上 Manipula ...

  7. D3.js

    html代码: <div id="id"> <p>Apple</p> <p id="aa">Pear</p ...

  8. HMM 前向后向算法(转)

    最近研究NLP颇感兴趣,但由于比较懒,所以只好找来网上别人的比较好的博客,备份一下,也方便自己以后方便查找(其实,一般是不会再回过头来看的,嘿嘿 -_-!!) 代码自己重新写了一遍,所以就不把原文代码 ...

  9. 微信小程序开发(1)

    底限,HTML,CSS,JS得会 先过一下官方的文档:https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html?t=20161230 ...

  10. asp.net MVC漏油配置总结

    URL构造 命名参数规范+匿名对象 routes.MapRoute(name: "Default",url: "{controller}/{action}/{id}&qu ...