2
最初の要素と2番目の要素にカーソルを置くと、いくつかの要素が左にアニメートされ、通常の速度でホバリングした場合はうまく動作しますが、 （マウスオフしたときにテキストが表示されない、またはテキストが元の場所に戻らず、以下の図を参照してください）。Jquery animate（）エフェクトがうまく機能しない
何か提案がありがとうございます。
1.textは
2.textを元の場所へ
$(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>
を使用していることをする助けとなるでしょう2つのリンクがあります。例えば '$（this）.stop（）。animate（300）'の例です。参考までに参照してください。https://api.jquery.com/stop/ –
ここには同様の問題のある質問があります。 stop（）メソッドを使って@GermanoPlebaniのアニメーションを停止する方法を解説します。 http://stackoverflow.com/questions/7429310/jquery-hover-problem-when-moving-mouse-too-quickly-between-elements –
スニペットにstop（）メソッドを追加しましたが、仕事。 – JonX