jQuery: если мышь зависает при загрузке страницы…

Question

Мне сложно работать над проблемой jQuery. На странице есть особенность изображения. Когда пользователь наводит курсор на изображение объекта, появляется прозрачное наложение с некоторым вспомогательным содержимым, и если они перемещают мышь за пределы объекта, полоса поддержки исчезает. Пока все хорошо, но…

Я бы хотел, чтобы прозрачный оверлей появлялся, задерживался на несколько секунд, а затем исчезал при загрузке страницы (например, пиковый пик). Довольно легко, подумал я. Но я не учел, что функция также должна проверять, находится ли мышь уже над областью функций при загрузке страницы. Если это так, полоса поддержки не должна исчезать до тех пор, пока пользователь не наведет курсор на область функций (например, начальное автоматическое исчезновение пропускается). Итак:

• Загрузка страниц
• Если мышь не находится над областью функций, покажите наложение, подождите несколько секунд, затемнение
• Если мышь находится над областью объектов, покажите наложение, не исчезайте до тех пор, пока пользователь не покинет функцию район
• После первого запуска, каждый раз, когда пользователь переходит на функцию наложения исчезает, когда они навели наложение исчезает

Кажется, я не могу придумать, как это сделать (я бы не стал отслеживать координаты мыши). Любые идеи приветствуются :)

Вот эта страница: http://collective.poccuo.com/

А вот что у меня есть на данный момент:

$(window).load(function(){  
    $('#content.homepage #support').show().delay(2000).fadeOut(100,function(){
        $('#content.homepage').hover(function(){
            $("#content.homepage #support").delay(500).fadeIn(350);
         },function(){
            $("#content.homepage #support").fadeOut(150);
        });
    });
 });

Answer 1

Установите тайм-аут, который скрывает div, но сбросьте тайм-аут, когда пользователь наведет курсор на элемент, чтобы он больше не исчезал автоматически.

var timeout = window.setTimeout(function(){
    $("#content.homepage #support").trigger('mouseout')
},4000);

$('#content.homepage #support').show();


        $('#content.homepage').hover(function(){
            window.clearTimeout(timeout);
            $("#content.homepage #support").fadeIn(350);
         },function(){
            $("#content.homepage #support").fadeOut(150);
        });

пример: http://jsfiddle.net/niklasvh/4sejb/

Answer 2

Проблема в том, что .mouseenter() не вызывается, если вы уже находитесь на вершине предмета. Тем не менее, .mousemove() делает. Это не позволяет вам «обнаружить» их, не двигая мышью, но если они не двигали мышью, вероятно, можно смело идти вперед и скрывать наложение, повторно отображая его всякий раз, когда они перемещаются.

Если вы ДЕЙСТВИТЕЛЬНО хотите обнаружить, что они начинают с мыши поверх вашего предмета без перемещения их мыши, вы должны иметь возможность захватить положение курсора и проверить его относительно положения экрана вашего пункт.

$('#yourdiv').hover(function() {
    // Show the thing
    // This is the "normal" show it scenario
}, function() {
    // Hide the thing
    // We always want to hide it when they leave
}).mousemove(function() {
    // Show the thing; if this is bound and they move on #yourdiv, you want to show it

    // However, this is only meaningful the first time, so stop tracking mousemove
    $(this).unbind('mousemove');
});

Answer 3

Я думаю, что вы должны сделать это следующим образом:

   var hideInitially = true; //This var does the magic
   $(window).load(function(){  
        $('#content.homepage').hover(function(){
            $("#content.homepage #support").delay(500).fadeIn(350);
            hideInitially= false; //If there has been a hover, don't hide on load
         },function(){
            $("#content.homepage #support").fadeOut(150);
        });
    $('#content.homepage #support').show();
    setTimeout(function(){ //Same as delay
       if(hideInitially) $('#content.homepage #support').fadeOut(100);  //Only hide if there wasn't a hover      
    }, 2000);
 });

Что этот код делает, чтобы предотвратить первоначальное сокрытие, если было зависание.Надеюсь это поможет.Приветствия