jQuery выдвижная панель

Question

На моем сайте вверху есть панель, содержащая около 9 изображений подряд.При загрузке страницы она скрыта, но под ней есть вкладка, и вы можете видеть как 3 пикселя нижней части элемента div.

Я хочу, чтобы при наведении курсора на вкладку ИЛИ на видимую часть панелиполе сдвинется вниз, и тогда, когда мышь больше не будет находиться на панели или вкладке, div будет скользить вверх.Я дал и вкладке, и div классу «слайдер-дескриптор».Вот как выглядит HTML:

<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>

И что я хочу в jQuery, это что-то вроде этого:

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

Что бы работало, если бы только один элемент имел ручку-слайдерКласс, однако, потому что есть 2, когда вы перемещаетесь из одного в другое, он все еще обрабатывает это событие как «левый элемент управления ползунка мыши», и это похоже на мерцание.Я хочу, чтобы эти 2 элемента SORT OF рассматривались как ЕДИНЫЕ в том, что когда вы покидаете вкладку и вводите div с содержимым слайдера, событие hoverout не запускается, потому что мышь не покинула «слайдер-дескриптор» ... если этоимеет смысл ...

Answer 1

Вы можете использовать свой slider-wrapper div следующим образом:

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

Поскольку он содержит оба элемента, они будут рассматриваться как один.

Надеюсь, это поможет.Приветствия

Answer 2

Вы можете использовать существующие идентификаторы и использовать #slider-wrapper для запуска события "mouseleave", так как оно по-прежнему будет переносить вкладку и содержимое

Я использовал click, чтобы открыть вкладку, новы также можете использовать mouseenter

например

$('#slider-tab').click(function() {
    $('#slider-content').slideDown('normal');
});

$('#slider-wrapper').mouseleave(function() {
    $('#slider-content').slideUp('normal');
});