jQuery - при наведении курсора на div, скользите в div и сможете навести курсор на недавно открытый div

Question

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

Однако, когда я перемещаю свою мышь из нижней панели, чтобы щелкнуть по чему-то во вновь появившемся div (сдвинул в div), он снова активирует эффект, как я могу остановить это, чтобы я мог навести курсор на оба (после сдвига в div включен) и перезапустите эффект, по сути, поместив его в цикл с тем же эффектом slideDown / slideUp.

Вот мой код:

$(".playlist").hide();
$(".player, .playlist").hover( 
    function(){ $(".playlist").slideDown(); },
    function(){ $(".playlist").slideUp(); }
);

И мой HTML:

<div class="playlist">
<!-- This would display some content that I can click on -->
</div>

<div class="player">
<!-- This expands across the whole window and is fixed to the bottom -->
</div>

Answer 1

http://jsfiddle.net/jv25Y/

Новая разметка

<div class="player">
    <div class="playlist">
         This would display some content that I can click on 
    </div>
    This expands across the whole window and is fixed to the bottom
</div>

Новый JS

$(function(){
    $(".playlist").hide();
    $(".player").hover( 
        function(){ $(".playlist").slideDown(); },
        function(){ $(".playlist").slideUp(); }
    );
});

Будет ли что-то подобное работать? По сути, плейлист теперь содержится в плеере. Таким образом, ваша мышь не покинет плеер, когда вы пытаетесь щелкнуть ссылку в списке воспроизведения. Если это не совсем подходит (из-за стиля на вашей странице и т. Д.), Вы также можете просто обернуть элемент вокруг плейлиста и плеера, а затем вызвать hover вместо него, как это,

Разметка

<div id="wrapper">
    <div class="playlist">
         This would display some content that I can click on 
    </div>
    <div class="player">
        This expands across the whole window and is fixed to the bottom
    </div>
</div>

JS

$("#wrapper").hover( 
     function(){ $(".playlist").slideDown(); },
     function(){ $(".playlist").slideUp(); }
 );