下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:jq处理动画累加

作者:TenFly     来源: https://www.cnblogs.com/tenfly/p/11726490.html点击数:790发布时间: 2020-03-09 09:30:49

标签: divjq动画

Web开发

  动画的概念不同于一般意义上的动画片,动画是一种综合艺术,它是集合了绘画、漫画、电影、数字媒体、摄影、音乐、文学等众多艺术门类于一身的艺术表现形式。最早发源于19世纪上半叶的英国,兴盛于美国,中国动画起源于20世纪20年代。

  问题:日程提醒(跟日历一样的切换效果),只用一个div来展示当天日程数据,每次清空div里的数据再加载数据,导致切换日期时,数据展示div有闪动,于是采用动画来进行过渡,这样就巧妙地避免了闪动;

  $("#siteInfo").hide(function(){

  $("#siteInfo").empty();

  getSite();

  }).fadeIn();

  但由于动画有完成时间,导致频繁切换日期的时候出现了动画累积的现象,操作停止后累积的动画仍在继续,这样的用户体验感是很差的,于是想到了stop()方法来停止动画

  $("#siteInfo").stop().hide(function(){

  $("#siteInfo").empty();

  getSite();

  }).fadeIn();

  看起来不错,但总觉得还差点什么,原来stop()只停止了第一个动画([hide()]),对于后续的多个动画([fadeIn()]...)就无能为力了;

  然后看了一下stop()的语法:

  $("element").stop([clearQueue][,gotoEnd]);

  clearQueue:bool,代表是否要清空未执行的动画队列

  gotoEnd:bool,有前一个参数才有此参数,代表将正在执行的动画直接跳到末状态

  试试一个参数

  stop(true)

  它将后续动画全部清空了,频繁切换的时候,它基本会保持在当前状态,停止操作后完成最后一次数据加载,是可行的;

  stop(false)

  跟忽略它吧,什么效果也没有

  试试两个参数

  stop(false,false),跟stop()一样

  stop(false,true),第一个动画直接跳到末尾,接着继续后面的动画,所以是不满足效果的

  stop(true,false),跟stop(true)一样

  stop(true,true),跳到第一个动画末尾,后续动画全部停止

  动画的概念不同于一般意义上的动画片,动画是一种综合艺术,它是集合了绘画、漫画、电影、数字媒体、摄影、音乐、文学等众多艺术门类于一身的艺术表现形式。

赞(8)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程