jQuery слайд вверх / вниз контента при наведении мыши через две секунды - ошибка - PullRequest
Новая
       32

jQuery слайд вверх / вниз контента при наведении мыши через две секунды - ошибка

2 голосов
/ 02 марта 2012

Когда мышь находится над изображением, содержимое диапазона скользит вниз через две секунды, также когда я перемещаю курсор за пределы изображения, после того, как промежуток в две секунды перемещается вверх, это нормально.

Я хочу, чтобы диапазон отображалсяесли кто-то тоже наведет указатель мыши на этот промежуток, и моя проблема начнется ...

Я не знаю, достаточно ли я ясен, но я думаю, что код скажет вам больше, чем слова:)

Ссылка: http://jsfiddle.net/zDd5T/3/

HTML: 

<img id="image" src="button_green.png" />
<span id="content">
    <a href="http://www.google.com">Link</a>
    Some content here
</span>

CSS: 

#image{
   left:0px;
   position:absolute;
   z-index: 10;
}
#content{
   top:48px;
   left:0px;
   position:absolute;
   height: 100px;
   border: 1px solid #f00;
   display: block;
   z-index: 0;
   width: 100px;
}

JavaScript: 

$(document).ready(function() {
    $('#content').hide();
    var over_img = false;
    var over_span = false;
    $('#image').live('mouseover', function() {
        over_img = true;
        setTimeout(function() {
            $('#content').show('slide', {
                direction: 'up'
            }, 1000);
        }, 2000);
    });
    $('#content').live('mouseover', function() {
        over_span = true;
        setTimeout(function() {
            $('#content').show('slide', {
                direction: 'up'
            }, 1000);
        }, 2000);
    });
    $('#image').live('mouseout', function() {
        over_img = false;
        if (!over_img && !over_span) {
            setTimeout(function() {
                $('#content').hide("slide", {
                    direction: "up"
                }, 1000);
            }, 2000);
        }
    });
    $('#content').live('mouseout', function() {
        over_span = false;
        if (!over_img && !over_span) {
            setTimeout(function() {
                $('#content').hide("slide", {
                    direction: "up"
                }, 1000);
            }, 2000);
        }
    });
});

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 02 марта 2012

Для jQuery 1.7+ используйте on () вместо .live (), который устарел.

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

$(document).ready(function() {
    var T1, T2;
    $('#content').hide();
    $('body').on({
        mouseenter: function() {
            clearTimeout(T2);
            T1 = setTimeout(function() {
                 $('#content').slideDown(1000);
            }, 2000);
        },
        mouseleave: function() {
            clearTimeout(T1);
            T2 = setTimeout(function() {
                 $('#content').slideUp(1000);
            }, 2000);    
        }
    }, '#image, #content');
});​

Вот вам FIDDLE

0 голосов
/ 02 марта 2012

Если я правильно понимаю вашу проблему, я бы перестроил вашу разметку следующим образом: 

<div class="container">
   <img ... >
   <div class="content">
     .....
   </div>
</div>

Затем, вместо привязки вашего события наведения к изображению, вместо этого привязайте его к родительскому контейнеру. Таким образом, после отображения div содержимого он все еще находится в родительском элементе контейнера, с которым связано событие hover, поэтому он будет оставаться видимым, пока мышь находится над изображением, или div содержимого (или любым другим элементом). внутри контейнера)

...