jQuery при наведении:затухание в скрытом элементе div при одновременном исчезновении элемента «по умолчанию»
Вопрос
У меня есть два элемента div (один из них скрыт с помощью CSS), которые я поочередно появляюсь и исчезаю внутри общего пространства при наведении курсора мыши.
Это разметка:
<div id="wrap">
<div class="image">
<img src="http://domain.com/images/image.png">
</div>
<div class="text hide">
<p>Text text text</p>
</div>
</div>
И я применил этот код jQuery для исчезновения изображения и исчезновения текста при наведении курсора мыши:
<script type="text/javascript">
$(function(){
$('#wrap').hover(
function(){
$('#wrap .image').fadeOut(100, function(){
$('#wrap .text').fadeIn(100);
});
},
function(){
$('#wrap .text').fadeOut(100, function(){
$('#wrap .image').fadeIn(100);
});
}
);
});
</script>
Но проблема в том, что текстовый элемент div становится липким и не исчезает - всегда из-за слишком быстрого движения мыши.
Знаете ли вы, где это может быть решение?
Я организовал онлайн-тест: http://paragraphe.org/stickytext/test.html
Спасибо за любой совет
Решение
Если ваша оболочка не имеет ширины и высоты, вы можете получить некоторые странные результаты, поскольку она сжимается после удаления элемента изображения.Чтобы увидеть, добавьте рамку и фиксированную высоту/ширину вокруг оболочки.Или, по крайней мере, используйте одинаковую высоту для изображений и текстовых элементов.
<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>
ОТРЕДАКТИРОВАНО
Удален пример кода, который неприменим к тому, что вы пытаетесь выполнить.
Другие советы
попробуйте использовать .останавливаться() в вашей функции наведения, которая предотвратит состояние гонки, когда вы быстро перемещаете указатель мыши по элементам div
<script type="text/javascript">
$(function(){
$('#wrap').hover(
function(){
$('#wrap .image').fadeOut(100, function(){
$('#wrap.text').fadeIn(100);
});
},
function(){
$('#wrap.text').stop().fadeOut(100, function(){
$('#wrap.image').stop().fadeIn(100);
});
}
);
});
</script>
Попробуйте использовать очередь:
<script type="text/javascript">
$(function(){
$('#wrap').hover(
function(){
$('#wrap .image').stop(true).fadeOut(100);
$('#wrap .image').queue(function(){
$('#wrap.text').fadeIn(100);
$(this).dequeue();
});
},
function(){
$('#wrap .image').stop(true).queue(function(){
$('#wrap.text').fadeOut(100);
$(this).dequeue();
});
$('#wrap .image').fadeIn(100);
}
);
});
</script>
Очередь jQuery предназначена для каждого элемента, поэтому я пытаюсь запустить текстовые эффекты в очереди изображений.
И позвольте мне дать вам еще одно предложение.Если вы намерены применить этот эффект к различным изображениям, используйте class вместо id.
...
$('.wrap').hover(
function(){
var wrap = this;
$('.image', wrap).stop(true).fadeOut(100);
$('.image', wrap).queue(function(){
$('.text', wrap).fadeIn(100);
$(this).dequeue();
});
....
Таким образом, вам нужно позвонить только один раз.
Ваш код никогда не затмевает текстовый элемент div.Обе функции события наведения будут затемнять изображение и исчезать в тексте.
У вас один и тот же код в обоих hover
функции.Не стоит ли во втором случае заменить селекторы?
<script type="text/javascript">
$(function(){
$('#wrap').hover(
function(){
$('#wrap .image').fadeOut(100, function(){
$('#wrap.text').fadeIn(100);
});
},
function(){
$('#wrap.text').fadeOut(100, function(){
$('#wrap.image').fadeIn(100);
});
}
);
});
</script>
Спасибо за все советы :
Я пытался использовать события mouseenter/mouseleave, так как они, похоже, детально просматривают элементы div, с которыми имеют дело (как видно здесь), но ничего не изменилось.Итак, увидев, что все обычные инструкции jQuery не отвечают, я проверил, как предлагал мой CSS.
И в этом была хитрость.
Что у меня было:
.text p{position:relative; top:-370px; padding: 0 10px}
создавал огромное пустое пространство, которое браузер интерпретировал курсором как «не оставленное неподвижным» (я заметил, что перелет этого пустого пространства приводил к правильному реагированию текста).
Поэтому я изменил это:
.text {margin-top:-370px; padding: 0 10px; float:left}
Это оставляет тег «p» в покое и помещает второй блок в div, но без следов пустого пространства позади него.
Затем, что касается фрагмента, он будет работать и с mouseenter / moseleave и зависать :
<script type="text/javascript">
$(function(){
$('#wrap').mouseenter(
function(){
$('#wrap .image').fadeOut(100, function(){
$('#wrap .text').fadeIn(100);
});
}
);
$('#wrap').mouseleave(
function(){
$('#wrap .text').fadeOut(100, function(){
$('#wrap .image').fadeIn(100);
});
}
);
});
</script>
Это улучшенная версия http://paragraphe.org/nice/test.html