这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
这篇文章主要介绍了再 JavaScript 的 jQuery 库中编写动画效果的指南, 包括一些内建的效果方法的使用示例, 需要的朋友可以参考下
jquery 中常用的动画的方法就是 hide() 与 show().
$(element).hide() 这段代码可以与这相等 element.CSS("display","none")
在 hide(time) 与 show(time) 中填入事件,可以慢慢消失跟显现。可以修改元素的多个样式,高度,宽度,不透明度。
另一组方法 fadeIn() 与 fadeOut() 这个与 hide 跟 show 不同的是,当使用 hide 或者 show 的时候会改变网页的高度,而 fadeIn 与 fadeOut 则不会。
$("#panel h5.head").toggle(function(){$(this).addClass("highlight"); $(this).next().fadeOut(1000); },function(){ $(this).removeClass("highlight"); $(this).next("div .content").fadeIn(1000); }); 还有一组是 slideUp,slideDown 改变高度。
动画方法概括
动画队列
(1) 一组元素上的动画效果。
a) 当在一个 animate() 方法中应用多个属性时,动画是同时发生的。
b) 当以链式的写法应用动画方法时,动画是按照顺序发生的。
(2) 多组元素上的动画效果
a) 默认情况下,动画都是同时发生的。
b) 当以回调的形式应用动画方式时,动画是按照回调顺序发生的。
另外,在动画方法中,要注意其他非动画的方法会插队,例如 css() 方法,要使这些非动画的方法也按照顺序来执行,需要把这些方法写在动画方法的回调函数中。
举一个 animate 的例子:
- $("#id").animat({
- left: "400px",
- top: "300px"
- },
- 3000,
- function() {
- $(this).css("border", "1px solid blue");
- });
若想要动画停止,需要在 animate() 方法前插入 stop() 方法
例如:$("#id").stop().animate() 注意 stop 中的两个参数。
判断元素是否在动画状态的方法时:
- $(element).is(":animated");
jQuery 可以很方便的为页面中的元素添加一些动态效果,可以用其内建效果,也可以自己定义效果。
下面是一些内建的效果方法:
一个简单的例子:
- $('h1').show();
设置动画效果的时长
对于 $.fn.show 和 $.fn.hide 而言,默认情况下其时长是 0,其它效果的默认时长一般是 400 毫秒,当然也自己设置时长:
- $('h1').fadeIn(300); // 300 毫秒
- $('h1').fadeOut('slow'); // slow 是内建的速度常量
jQuery 默认的速度常量都位于 jQuery.fx.speeds 对象中:
- speeds: {
- slow: 600,
- fast: 200,
- // Default speed
- _default: 400
- }
我们也可以扩展这个对象,添加自己常用的速度值:
- jQuery.fx.speeds.blazing = 100;
- jQuery.fx.speeds.turtle = 2000;
回调函数
如果想在动画效果结束后再执行一些代码,那么可以给这些动画方法换入一个回调函数:
- $('div.old').fadeOut(300, function() {
- $(this).remove();
- });
如果选择器中没有匹配到任何元素,那么回调函数也不会被执行,所以在执行回调函数前做个判断是有必要的:
- var $thing = $('#nonexistent');
- var cb = function() {
- console.log('done!');
- };
- if ($thing.length) {
- $thing.fadeIn(300, cb);
- } else {
- cb();
- }
自定义动画方法
jQuery 中的 $.fn.animate 方法可以用来扩展我们的自定义动画,主要是通过 animate 方法设置元素 CSS 属性来实现的,设置元素 CSS 属性的时候可以使用绝对值,也可以使用相对值:
- $('div.funtimes').animate(
- {
- left : "+=50",
- opacity : 0.25
- },
- 300, // 时长
- function() { console.log('done!'); // 回调函数
- });
但是,用 $.fn.animate 创建自定义动画效果时,不能改变元素的颜色。如果要创建颜色动画,需要依赖其它一些颜色插件。 动画的风格
jQuery 内建的动画风格有两种:swing 和 linear
- $('div.funtimes').animate(
- {
- left : [ "+=50", "swing" ],
- opacity : [ 0.25, "linear" ]
- },
- 300
- );
控制动画
jQuery 提供了几个方法用来控制动画的执行:
$.fn.stop 停止当前正在执行的动画
$.fn.delay 使动画暂停一段时间:
$('h1').show(300).delay(1000).hide(300);
jQuery.fx.off :关闭动画的过度效果,相当于把时长设为 0。
来源: http://www.phperz.com/article/17/0417/269945.html