Jquery animate() 效果不能很好地运行答案

【问题标题】：Jquery animate() effect doesn't function wellJquery animate() 效果不能很好地运行
【发布时间】：2016-06-20 09:25:25
【问题描述】：

当鼠标悬停在第一个和第二个元素上时，一些元素会向左移动，如果以正常速度悬停效果很好，但如果悬停过快一段时间会崩溃（鼠标悬停时文字不会显示或文字不会移回原来的位置，请查看下图）。

任何建议将不胜感激。

1.文本不会显示

2.文本不会移回原来的位置

$(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;
      });
    }
  });
});

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="pfm-toolbar-wrap">
  <div class="pfm-toolbar-tabs">
    <div class="p-tab">
      <div class="pfm-tbar-tab-Spike m_b15">
        <div class="tab-ico cart"> <i class="cbl-icon"></i>  <em class="tab-text"> <a href="">text</a></em> 
        </div>
      </div>
      <div class="pfm-tbar-tab-group m_b15">
        <div class="tab-ico "> <i class="cbl-icon"></i>
          <em class="tab-text"> <a href="http://www.qanewspdb.com/tuan/Index.aspx">text2</a></em> 
        </div>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

在您使用动画的地方，添加停止。例如$(this).stop().animate(300)。参考api.jquery.com/stop
这里有一个类似问题的问题。它是使用 stop() 方法来解决的，可以像@GermanoPlebani 提到的那样停止动画。 stackoverflow.com/questions/7429310/…
我在sn-p中添加了stop()方法，但是还是不行。
有什么原因，为什么你使用复杂的 jquery 代码而不是 css3 转换？
虽然有替代方案，但可能会导致此设置出现问题：flag 变量在动画的complete 回调中设置。这意味着在设置之前有 300 毫秒的间隙，在此期间 if(flag===true) 不会触发并且超时不会停止。最好在调用动画之后设置标志。

标签： javascript jquery css

【解决方案1】：

你可以使用 css transition-delay 属性如下：

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

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

查找更多信息here。

【讨论】：

【解决方案2】：

我建议你使用 CSS 过渡，这里有两个链接可以帮助你用更少的代码和使用 CSS 过渡

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

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

【讨论】：