<meta name="keywords" content="华夏棋牌,jQuery,动画" />
华夏棋牌 > web前端 > js教程 > 注释

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

原创 2016-05-16 15:45:19 0 62
赞助会员专享特权
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中文网最新课程二维码
  • 相关标签:jQuery 动画
  • 本文原创宣布php中文网 ,转载请注明出处,谢谢您的尊重!
  • 相关文章


  • 原生javascript完因素享到同伙圈功效 支持ios和android_javascript手艺
  • jQuery链式挪用与show知识浅析_jquery
  • JS完成登录页面记着密码和enter键登录措施推荐_javascript手艺
  • BootstrapTable与KnockoutJS相联络完成增删改查功效【一】_javascript手艺
  • 再JavaScript的jQuery库中编写动画效果的指南_基础知识
  • 网友议论

    文明上彀理性语言,请遵守 新闻议论服务协定

    我要议论

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国际最盛行的中文PHP开发框架,也是您Web项目的最好选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架知识泉源,将...

    • 2017-05-16 12:03:57
    • 点击数(173671)

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是天下上最好的编程语言。真的是这样吗?这个梗现实是从哪来的?学会本课程,你就会明确了。 华夏棋牌-万豪棋牌电玩城-微信娱乐棋牌出品的PHP入门系统教授修养视频,完全从初学者的角度出发,绝不玩虚的,一切以适用、有用...

    • 2017-03-20 22:47:17
    • 点击数(169808)

    独孤九贱(1)_HTML5视频教程

    华夏棋牌《php.cn原创html5视频教程》课程特点:php中文网原创滑稽段子系列课程,以恶弄,段子为主题气焰气焰的php视频教程!轻松的教授修养气焰气焰,杂乱的教授修养形式,让同砚们在不知不觉中,学会了HTML知识。 ...

    • 2017-03-13 10:15:11
    • 点击数(137195)

    ThinkPHP5实战之[教授修养治理系统]

    本套教程,以一个真实的黉舍教授修养治理系统为案例,手把手教会您怎样在一张白纸上,从零泉源,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    • 2017-07-24 16:48:56
    • 点击数(130504)

    PHP入门视频教程之一周学会PHP

    一切盘算机语言的学习都要从根原泉源,《PHP入门视频教程之一周学会PHP》不只是PHP的基础部门更主要的是PHP语言的焦点手艺,是学习PHP必须控制的内容,任何PHP项目的完成都离不开这部门的内容,通...

    • 2016-11-16 14:54:14
    • 点击数(129862)

    作者信息

    php中文网

    认证0级讲师

    比来文章

    相关视频教程

  • javascript低级视频教程
  • jquery 基础视频教程
  • javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程
  • 相关视频章节