Нужна помощь в рефакторинге простого сценария анимации jquery

Question

У меня есть окно сообщения о состоянии (div box), расположенное внизу веб-страницы с использованием позиции: исправлено; и снизу: 0 ;. Его высота изначально 11px.

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

Я совершенно новичок в javascript и jquery, поэтому со мной все в порядке. Мне удается заставить это работать именно так, как я хочу, но мне кажется, что можно было бы написать это более элегантно:

<script type="text/javascript">
    $(document).ready(function() {
        $("#footer").dblclick(showStatusBar);
    });     
    function showStatusBar() {
        var footer = $("#footer");
        footer.unbind('dblclick', showStatusBar);
        footer.animate({ height: "100px" }, 200);
        footer.dblclick(hideStatusBar);
        footer.bind('mouseleave', hideStatusBar);
    }

    function hideStatusBar() {
        var footer = $("#footer");
        footer.unbind('mouseleave', hideStatusBar);
        footer.unbind('dblclick', hideStatusBar);
        footer.animate({ height: "11px" }, 200);            
        footer.dblclick(showStatusBar);
    }
</script> 

Я поиграл с событием toggle , но не смог заставить его работать. Вклад будет высоко ценится.

С наилучшими пожеланиями, Эгиль.

Answer 1

Вы можете создать одну функцию, которая действует как функция переключения. Примерно так:

// NOTE: Untested!
function statusBarToggle() {
    /* Starts as hidden. */
    if(this.isHidden == undefined)
        this.isHidden = true;

    this.isHidden = !this.isHidden;

    var newHeight = this.isHidden ? 11 : 200;

    $(this)
        .stop()
        .animate({ height: newHeight + 'px' }, 200);

    /* When mouse leaves open status bar, close it. */
    if(this.isHidden)
        $(this).unbind('mouseleave', statusBarToggle);
    else
        $(this).bind('mouseleave', statusBarToggle);
}

$(document).ready(function() {
    // ...
    $('#footer').dblclick(statusBarToggle);
}

Это дает строке состояния свойство isHidden и использует его для проверки, показываем ли мы или скрываем строку состояния. Эта функция также работает с другими элементами, если вам это нужно.

(То, что вы можете связать много команд jQuery, как я однажды сделал с функциями 'stop' и 'animate'.)