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>
Где вы используете одушевленные, добавить остановку. Например, $ (this) .stop(). Animate (300) '. См. Ссылку https://api.jquery.com/stop/ –
. Здесь возникает вопрос с аналогичной проблемой. Он решается с помощью метода stop(), чтобы остановить анимацию mlike @ GermanoPlebani. http://stackoverflow.com/questions/7429310/jquery-hover-problem-when-moving-mouse-too-quickly-between-elements –
Я добавил метод stop() в фрагменте, но он все еще не " т работы. – JonX