jQuery slide up/down content on mouse over/out after two seconds - bug

Question

When mouse is over the image, span content slides down after two seconds, also when I move cursor out of image, after two seconds span slides up, that's work fine.

I want to span be displayed if someone move mouse over that span too, and there my problem begins...

I do not know if I was clear enough but I think the code will tell you more than words :)

Link: 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);
        }
    });
});

Thanks in advance!

score 0 · Answer 1 · answered Mar 02 '12 at 00:56

If I'm understanding your issue correctly, I would restructure your markup as follows:

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

Then, instead of binding your hover event to the image, bind it to the parent container instead. This way, once the content div is displayed, it is still inside the container parent element which has the hover event bound to it, so it will stay visible while the mouse is over either the image, or the content div (or any other element inside the container)

Thanks for answer but it can't be done like that because in my real project I have image 40px with, and about 200px width content, so if someone mouse over the other 160px appears content and doesn't look right... — luka, Mar 02 '12 at 01:10

adeneo · Accepted Answer · 2012-03-02T01:47:16.567

0

For jQuery 1.7+ use on() instead of .live() wich is deprecated.

I believe this should solve your problem:

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

Here's a FIDDLE

edited Mar 02 '12 at 01:47

answered Mar 02 '12 at 01:14

adeneo

312,895
29
395
388

@luka - if the answer does in fact solve your problem, you should accept it. – adeneo Mar 02 '12 at 01:21
If you also `clearTimeout(T1)` in the mouseout handler, then this is beneficial to eliminate a latent slideDown, particularly if the user does a quick mouseover/mouseout. http://jsfiddle.net/zDd5T/10/ – Beetroot-Beetroot Mar 02 '12 at 01:30
@Beetroot-Beetroot - I did actually think about that, but it was'nt really part of the question. Anyway, added it now. Also adding `stop(true, true)` before the sliding would make sure there was'nt any issues with the animations aswell, but the OP will probably figure out what he needs. – adeneo Mar 02 '12 at 01:50

jQuery slide up/down content on mouse over/out after two seconds - bug

2 Answers2