jquery - 鼠标移动太快时不触发事件

Question

当鼠标在按钮上移动太快时，是否可以不触发图标？因为当我在按钮上快速移动鼠标时，图标会向下移动，但 :before 和 :after 元素不会触发。如果您在按钮上多次移动它，图标会延迟触发，因此它会多次上下移动。

http://codepen.io/Earbot/pen/dvEzbw

function easeInOutBack(t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  if ((t /= d / 2) < 1) return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
  return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
}

$('#head-btn').on('mouseenter', function() {
  var bubu = function() {
    $('#head-io').animate({
      top: '50%',
    }, 500);
  }
  setTimeout(bubu, 500);
}).on('mouseleave', function() {
  $('#head-io').animate({
    top: '-100%',
  });
});

body {
  background: #222;
}

#head-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
  border: 2px solid #fff;
  color: #fff;
  text-transform: uppercase;
  font-size: .8rem;
  letter-spacing: 4px;
  height:2rem;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}

#head-io {
  position: absolute;
  font-size: 2rem;
  top: -100%;
  left: 50%;
  transform: translate(-50%);
  z-index: 3;
  color: #222;
  transform:translate(-50%,-50%);
}

#head-btn:after {
  content: '';
  position: absolute;
  left: calc(100% + 2px);
  height: 100%;
  width: 100%;
  top: 0;

  background: #fff;
  -webkit-transition: all 1000ms cubic-bezier(0.680, 0, 0.265, 1);
  -webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -moz-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -o-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1);
  -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
  transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
}


/*\f2eb*/

#head-btn:before {
  content: '';
  font-size: 2rem;
  text-align: center;
  position: absolute;
  height: 100%;
  width: 100%;
  background: #fff;
  top: 0;
  left: calc(-100% - 2px);
  -webkit-transition: all 1000ms cubic-bezier(0.680, 0, 0.265, 1);
  -webkit-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -moz-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -o-transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  transition: all 1000ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -webkit-transition-timing-function: cubic-bezier(0.680, 0, 0.265, 1);
  -webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
  transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

#head-btn:hover:after {
  left: calc(50% - 2px);
}

#head-btn:hover:before {
  left: calc(-50% + 2px);
}

<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-lg" id="head-btn">I'm interested <i class="ion-ios-email"id="head-io"></i></button>

Answer 1

如果你已经在使用 CSS 转换，为什么不保持这种方式呢？，而不是你的 JS 只是这个样式:

#head-io {
  ...
  transition:top .5s linear;
}
#head-btn:hover #head-io {
  top:0;
  transition-delay:.5s;
}

Codepen Demo