首页 > web前端 > js教程 > 再JavaScript的jQuery库中编写动画效果的指南_基础知识

再JavaScript的jQuery库中编写动画效果的指南_基础知识

WBOY
发布: 2016-05-16 15:45:19
原创
1185 人浏览过

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改变高度。


动画方法概括

2015813161335011.jpg (631×495)

动画队列


(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 可以很方便的为页面中的元素添加一些动态效果,可以用其内建效果,也可以自己定义效果。

下面是一些内建的效果方法:

  • $.fn.show 显示所选择的元素
  • $.fn.hide 隐藏所选择的元素
  • $.fn.fadeIn 淡入
  • $.fn.fadeOut 淡出
  • $.fn.slideDown 通过垂直滑动的效果来显示元素
  • $.fn.slideUp 通过垂直华东的效果来隐藏元素
  • $.fn.slideToggle 显示滑动或隐藏滑动交互执行

一个简单的例子:

$('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。


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板