京东首页动画三个注意的问题

1：如何实现鼠标移入就有动画，不管移入几次
原因，gif动态图只会播放一次，第二次会停止在结束的画面
解决方法：可以每次hove的时候重新加载图片，（可以在请求图片的时候改变路径中的参数，例如加入时间戳）

  1. background-image: url("http://img1.360buyimg.com/da/jfs/t1/15264/1/11653/343050/5c90a38aEdb3eb3a8/f0c3252484139946.gif?v=1598859927319");

代码中是京东首页动态图的地址，其中的请求地址中可以添加参数（ v=1598859927319） 后面的数字是时间戳
2：动画结束时，鼠标移出这个区域，动态图立即切换为静态图
3:动画还没有完成播放，鼠标就移出，动态图继续播放动画，直到动画播放完毕自动切换为静态图

解决办法
在动态图播放时为添加class类名标志动图动画开始 此处称为为animate-start
在动态图结束的时候移除animate-start 并添加动画结束的class类名 此处称之为animate-end
在其鼠标移出logo区域时，并为其添加鼠标移出的class的类名 此处称之为hover-out
当鼠标移出的类名(hover-out)与动画结束的类名(animate-end)同时存在时，静态logo图才会显示，只满足单个条件隐藏静态图

代码如下

  1. (function(){
  2.     /**
  3.  * 鼠标移入 动态图显示，并播放其动画
  4.  * 鼠标移入未移出，动态图一直显示，即使播放完毕也要显示，
  5.  * 移出时，动态图已经播放完毕，立即显示静态logo图
  6.  * 鼠标再次移入此时动态图的动画并未播放完毕，继续播放动态图动画，
  7.  * 动态图播放结束，静态logo图显示
  8.  * logo-title 为静态图
  9.  * logo-bg 为gif动态图
  10.  * .animate-end.hover-out 当同时拥有这两个类名时 z-index: 1 !important; 静态图才会显示
  11.  *  show-bg  z-index: -1; 背景图隐藏
  12.  */
  13. $('.logo').hover(function(){
  14.     $('.logo-title').removeClass('hover-out');
  15.     if(!$('.logo-bg').hasClass('animate-start')){
  16.         $('.logo-title').removeClass('animate-end');
  17.         $('.logo-bg').css({
  18.             backgroundImage: 'url("http://img1.360buyimg.com/da/jfs/t1/15264/1/11653/343050/5c90a38aEdb3eb3a8/f0c3252484139946.gif?v='+new Date().getTime()+'")',
  19.         }).addClass('animate-start');
  20.         setTimeout(() => {
  21.             $('.logo-bg').removeClass('animate-start');
  22.             $('.logo-title').addClass('animate-end');
  24.         }, 5000);
  25.     }
  26.     $('.logo-title').addClass('show-bg'); 
  28. },function(){
  29.     if(!$('.logo-bg').hasClass('animate-start')){
  30.         $('.logo-title').addClass('animate-end');
  31.         $('.logo-title').removeClass('show-bg');
  32.     }
  33.     $('.logo-title').addClass('hover-out');
  35. })

及其添加类名的css代码

  1. .animate-end.hover-out {
  2.   /*当同时拥有这两个类名时才将其显示*/
  3.     z-index: 1 !important;
  4. }
  5. .show-bg {
  6.     z-index: -1;
  7. }