jQuery при наведении:затухание в скрытом элементе div при одновременном исчезновении элемента «по умолчанию»

Question

У меня есть два элемента 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

Спасибо за любой совет

Answer 1

Если ваша оболочка не имеет ширины и высоты, вы можете получить некоторые странные результаты, поскольку она сжимается после удаления элемента изображения.Чтобы увидеть, добавьте рамку и фиксированную высоту/ширину вокруг оболочки.Или, по крайней мере, используйте одинаковую высоту для изображений и текстовых элементов.

<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>

ОТРЕДАКТИРОВАНО

Удален пример кода, который неприменим к тому, что вы пытаетесь выполнить.

Answer 2

попробуйте использовать .останавливаться() в вашей функции наведения, которая предотвратит состояние гонки, когда вы быстро перемещаете указатель мыши по элементам 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>

Answer 3

Попробуйте использовать очередь:

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

Таким образом, вам нужно позвонить только один раз.

Answer 4

Ваш код никогда не затмевает текстовый элемент div.Обе функции события наведения будут затемнять изображение и исчезать в тексте.

Answer 5

У вас один и тот же код в обоих 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>

Answer 6

Спасибо за все советы :

Я пытался использовать события 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