Я работаю над проектом, содержащим много полезных элементов.Я написал анимацию, которая делает это:
При наведении курсора изображение исчезает, и в качестве обратного вызова, исчезает div, содержащий информацию. Затем при исчезновении мыши информационный div исчезает, а в качестве обратногоизображение возвращается обратно. Я использую плагин hoverIntent.
Моя проблема в том, что если вы задержитесь на div, то все будет хорошо.Но если вы остановитесь, скажем, на 300 мс, анимация остановится, но обратный вызов, показывающий информационный div, все еще вызывается, игнорируя событие отсутствия мыши.Это приводит к тому, что информация всегда остается неизменной ...
Вот мой код:
var infoPaneSettings = {
sensitivity: 3,
interval: 200,
timeout: 500,
over: showPane,
out: hidePane
}
function showPane() {
var entry = $(this);
$('.featured_img', entry).fadeTo(1000, 0,
function(){
$('.infoPane', entry).fadeTo(200, 1);
});
}
function hidePane() {
var entry = $(this);
$('.infoPane', entry).fadeTo(300, 0,
function(){
$('.featured_img', entry).fadeTo(200, 1);
});
}
$('.entry').each(function(){
$(this).hoverIntent(infoPaneSettings);
});
Надеюсь, вы мне поможете!