Question

如果有足够的时间在mouseenter和mouseleave上完成相应的动画，代码可以正常工作。但是快速悬停会使动画队列变得混乱，并且会执行mouseenter和mouseleave的结束状态。我该如何优化代码？这是执行这些动画的正确方法吗？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">

<style>
.menu-icon {
  position: absolute;
  overflow: hidden;
  width: 50px;
  height: 50px;
  top: 13px;
  left: 15px;
  z-index: 4000;
}
.menu-icon i {
  display: inline-block;
  background: #fff;
  height: 5px;
  width: 30px;
  position: absolute;
  left: 10px;
}
.menu-icon i:nth-of-type(1) {
  top: 15px;
}
.menu-icon i:nth-of-type(2) {
  top: 23px;
}
.menu-icon i:nth-of-type(3) {
  top: 31px;
}
.menu-icon span {
  width: 50%;
  height: 100%;
}
.menu-icon .first {
  float: left;
  background:#ed145a;
}
.menu-icon .second {
  float: right;
  background:#003f5f;
}
.menu-icon p {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  top: -100px;
  left: 0;
  color: #fff;
  font-size: 1.5em;
  margin:0;
  padding-top:13px;
}

</style>
</head>

<body>


<a class="menu-icon" href="javascript:void(0)">
    <p class="fa fa-chevron-down"></p>
    <span class="first"></span>
    <span class="second"></span>
    <i class="i1"></i>
    <i class="i2"></i>
    <i class="i3"></i>
</a>


<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
    $changedColor1 = '#ed145a';
    $changedColor2 = '#003f5f';
    $('.menu-icon').hover(function(){
        $(this).find('.first').css({"background":$changedColor2, "transition":"all .8s ease-in"});
        $(this).find('.second').css({"background":$changedColor1, "transition":"all .8s ease-in"});
        $(this).find('.i1').stop(true, false).animate({left:'100%'}, 200, "easeInBack", function(){
            $(this).parent().find('.i2').stop(true, false).animate({left:'100%'}, 200, "easeInBack", function(){
                $(this).parent().find('.i3').stop(true, false).animate({left:'100%'}, 200, "easeInBack", function(){
                    $('.menu-icon').find('p').stop(true, false).animate({top:'0'}, 200);
                });
            });
        }); 
    }, function(){
        $(this).find('.first').css({"background":$changedColor1, "transition":"all .8s ease-in"});
        $(this).find('.second').css({"background":$changedColor2, "transition":"all .8s ease-in"});
        $('.menu-icon').find('p').stop(true, false).animate({top:'-100px'}, 200, function(){
            $(this).parent().find('.i1').stop(true, false).animate({left:'10px'}, 200, "easeOutBounce", function(){
                $(this).parent().find('.i2').stop(true, false).animate({left:'10px'}, 200, "easeOutBounce", function(){
                    $(this).parent().find('.i3').stop(true, false).animate({left:'10px'}, 200, "easeOutBounce");
                });
            });
        });
    });
</script>
</body>
</html>

Glitchy汉堡包菜单jquery悬停动画

0 个答案: