jQuery在鼠标快速移动时出现悬停错误时在div中隐藏和显示内容

Question

在使用鼠标悬停时，使用jquery显示和隐藏按钮中的两个图像的菜单按钮存在问题。如果用户在动画制作完成之前先滑入然后滑出，则将显示两个图像。

Jsfiddle位于：https://jsfiddle.net/wckilby/d8wrs1gf/1/

HTML：

<div id="wrapper">
  <img id="flag" src="https://dev.creativeforthepeople.org/assets/globals/flag-icon.svg">
  <img id="name" src="https://dev.creativeforthepeople.org/assets/globals/cftp-logo.svg">
</div>

JS：

$(document).ready(function () {
  $( "#wrapper" ).mouseenter(function() {
    $( "#flag" ).fadeOut(150);
    $( "#wrapper" ).css("width", "360px");
    $( "#name" ).delay(150).fadeIn(150);
  });
  $( "#wrapper" ).mouseleave(function() {
     $( "#name" ).hide();
     $( "#wrapper" ).css("width", "40px");
     $( "#flag" ).delay(150).fadeIn(150);
  });
});

Answer 1

要避免这种情况，您可以在每个事件处理程序中执行任何进一步的动画之前调用stop()：

$(document).ready(function() {
  $("#wrapper").mouseenter(function() {
    $("#flag").stop(true).fadeOut(150);
    $("#wrapper").css("width", "360px");
    $("#name").delay(150).fadeIn(150);
  });

  $("#wrapper").mouseleave(function() {
    $("#name").stop(true).hide();
    $("#wrapper").css("width", "40px");
    $("#flag").delay(150).fadeIn(150);
  });
});

#flag {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

#name {
  display: none;
  height: 18px;
  position: absolute;
  top: 50%;
  left: calc(50% + 1px);
  transform: translate(-50%, -50%);
}

#wrapper {
  position: relative;
  transition: all 0.15s;
  background: #e5515f;
  border-radius: 50px;
  height: 40px;
  text-align: center;
  width: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <img id="flag" src="https://dev.creativeforthepeople.org/assets/globals/flag-icon.svg">
  <img id="name" src="https://dev.creativeforthepeople.org/assets/globals/cftp-logo.svg">
</div>

Answer 2

您可以调用finish()强制动画在其持续时间之前结束。

// Home button hover effects
$(document).ready(function () {
	if($(window).width() >= 576) {
		$( "#wrapper" ).mouseenter(function() {
			$( "#flag" ).finish().fadeOut(150);
			$( "#wrapper" ).css("width", "360px");
			$( "#name" ).finish().delay(150).fadeIn(150);
		});
		$( "#wrapper" ).mouseleave(function() {
			$( "#name" ).finish().hide();
			$( "#wrapper" ).css("width", "40px");
			$( "#flag" ).finish().delay(150).fadeIn(150);
		});
	}
});

#flag {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

#name {
  display: none;
  height: 18px;
  position: absolute;
  top: 50%;
  left: calc(50% + 1px);
  transform: translate(-50%, -50%);
}

#wrapper {
  position: relative;
  transition: all 0.15s;
  background: #e5515f;
  border-radius: 50px;
  height: 40px;
  text-align: center;
  width: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <img id="flag" src="https://dev.creativeforthepeople.org/assets/globals/flag-icon.svg">
  <img id="name" src="https://dev.creativeforthepeople.org/assets/globals/cftp-logo.svg">
</div>