Jquery animate（）效果并不能很好地运行

Question

当悬停在第一个和第二个元素上时，一些元素将动画到左边，如果以正常速度盘旋它会很好，但如果在某些时候徘徊太快会崩溃 （文字不会显示或文字在鼠标移动时不会移回原来的位置，请查看下图）。

任何建议都将不胜感激。

1.text赢了

2.text不会回到原来的位置

＆＃13;

＆＃13;

<a  href="#xyz">Go XYZ</a>

＆＃13;

$(document).ready(function() {
  var flag = false;
  $(".tab-ico").hover(function() {
    var f = $(this);
    f.data('timeout', window.setTimeout(function() {
      f.find(".tab-text").stop(true, true).animate({
        left: "-=64"
      }, 300, function() {
        flag = true;
      });
    }, 300));
  }, function() {
    clearTimeout($(this).data("timeout"));
    if (flag === true) {
      $(this).find(".tab-text").stop(true, true).animate({
        left: "+=64"
      }, 300, function() {
        flag = false;
      });
    }
  });
});

＆＃13;

.pfm-toolbar-wrap {
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  width: 35px;
  z-index: 9990;
}

.pfm-tbar-tab-Spike {
  position: relative;
  width: 35px;
}

.pfm-toolbar-tabs {
  border-right: 5px solid #7a6e6e;
  height: 100%;
}

.p-tab div.tab-ico {
  background: #7a6e6e;
}

.tab-text {
  border-radius: 3px;
  color: #fff;
  height: 32px;
  left: 0px;
  line-height: 32px;
  position: absolute;
  text-align: center;
  width: 70px;
  padding-right: 5px;
  z-index: -1;
  background: #7a6e6e;
}

.tab-text a {
  color: #fff;
  display: block;
}

.p-tab {
  left: 0;
  margin-top: -100px;
  position: absolute;
  top: 50%;
  width: 35px;
  z-index: 9;
  text-align: center;
}

.p-tab div.tab-ico:hover {
  background: #e20531;
  cursor: pointer;
}

.p-tab div.tab-ico:hover .tab-text {
  background: #e20531;
}
.tab-ico {
  width:35px;
  height:35px;
  margin-bottom:5px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用 css 转换延迟属性，如下所示：

transition-delay: 1s; /* delays for 1 second */

-webkit-transition-delay: 1s; /* for Safari & Chrome */

查找更多信息here。

Answer 2

我建议您使用CSS转换，这里有两个链接可以帮助您使用更少的代码并使用CSS转换来实现

https://css-tricks.com/almanac/properties/t/transition/

https://blog.alexmaccaw.com/css-transitions