Question

On my site I have a panel at the top containing like 9 images in a row. On page load it’s hidden but there is a tab underneath it and you can see like 3 pixels of the bottom of the div.

What I want is that when you hover over the tab OR the visible part of the panel the box will slide down, and then when the mouse is no longer on the panel or the tab the div will slide up. I’ve given both the tab and the div a class of “slider-handle”. This is what the html looks like:

<div id="slider-wrapper">
    <div id="slider-content" class="slider-handle">
        <img src="blabla.jpg" /> (*9)
    </div>
    <div id="slider-tab" class="slider-handle">
        <span>Click here 2 open slider blabla.</span>
    </div>
</div>

And what I want in the jQuery is something like this:

$(document).ready(function () {
    $('.slider-handle').hover(function () {
        $('slider-content').animate({
            height: '50px'
        });
    }, function () {
        $('slider-content').animate {
            {
                height: '3px'
            });
    });
});

Which would work if only one element had the slider-handle class, however because there’s 2, when you hover out of one and into the other it still treats this event as ‘mouse left slider-handle element’ and there’s like a flicker. I want these 2 elements to SORT OF be treated as ONE in that when you leave the tab and enter the slider-content div, the hoverout event isn’t triggered because the mouse has not left ‘slider-handle’…if that makes sense…

Answer 1

You can use your slider-wrapper div, like this:

$(document).ready(function () {
    $('#slider-wrapper').hover(function () {
        $('#slider-content').animate( {height: '50px'} );
    }, function () {
        $('#slider-content').animate( {height: '3px'} );
    });
});

As it contains both elements, these will be treated as one.

Hope this helps. Cheers