Как slideDown фиксированного DIV один раз при нажатии на другую кнопку

Question

То, что я пытаюсь сделать

Закрыть DIV с вторичной кнопкой и имитируя сценарий slideDown от первой кнопки.

Проблема

После нажатия кнопки сноска нажатии отображает мои скрытые DIV (#footerPanel) нажатием заголовка вверх. После того, как вы нажмете нижний колонтитул, он закрывает панель и сдвигает заголовок на место.

Кнопка меню будет работать следующим образом, как только вы наведете курсор мыши на кнопку навигации по сайту (не включенной в JSFiddle). Имея это, я хотел бы иметь возможность закрыть #footerPanel и понизить заголовок, имитируя функцию закрытия с помощью кнопки нижнего колонтитула.

Что происходит сейчас, когда я нажимаю меню, панель #footerPanel скользит вниз, но оставляя заголовок застрявшим в том месте, где его подталкивал. Также, когда вы перемещаете мышь, div возвращается назад.

Как я могу исправить эту проблему? Я попробовал несколько решений, но все они, похоже, имеют тот же результат.

В JS

$('#more').toggle(function(){ 
    //show its submenu 
$('#footerPanel').slideDown(500); 
$(this).parent().parent().animate({'bottom': "+=400"}, 500); 
    }, 
function() { 
    //hide its submenu 
$('#footerPanel').slideUp(500);  
$(this).parent().parent().animate({'bottom': "-=400"}, 500);    
    }); 
$(document).ready(function(){ 
$('#menu').hover(function(){ 
$("#footerPanel").slideToggle(); 
    }); 
}); 

JSFiddle

Answer 1

Обновлено Fiddle:http://jsfiddle.net/9s33F/5/

Я думаю, что у меня есть то, что вы ищете. Я добавил следующее в качестве обратного вызова при завершении функции animate при открытии меню.

function() { 
    $(this).addClass('open'); 
} 

Затем в обработчик щелчка для меню добавьте следующее if заявление:

if ($(this).closest('header').is('.open')) { 
    $('header').animate({'bottom': "-=400"}); 
} 

Кроме того, вы код будет выглядеть чище и меньше, если вы использовали .closest(), а не .parent().parent() и так далее.

jQuery.closest: http://api.jquery.com/closest/