需要帮助重构一个简单的jquery动画脚本

I have a status message box (div box) positioned at the bottom of a web page using position: fixed; and bottom: 0;. Its height is initially 11px.

我有一个状态消息框(div框)位于网页底部使用position:fixed;和底部:0;。它的高度最初为11px。

I want to allow users to double click it when there are more status messages than what can fit within the default hight, make it grow. If they double click it again or move the mouse away from the box, it should shrink again.

我希望允许用户在有超过默认高度的状态消息时双击它,使其增长。如果他们再次双击它或将鼠标从盒子中移开,它应该再次收缩。

I am completely new to javascript and jquery, so bare with me. I manage to get this working exactly as I want, but it seems to me that it should be possible to write this more elegantly:

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

I played around with the toggle event, but was unable to get it working. Input will be much appreciated.

我玩过切换事件,但无法使其正常工作。输入将非常感激。

Best regards, Egil.

最好的问候,埃吉尔。

1 个解决方案

#1

You can create one function which acts as a toggle function. Something like this:

您可以创建一个充当切换功能的功能。像这样的东西:

// 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);
}

This gives the status bar an "isHidden" property, and uses it to check if we are showing or hiding the status bar. This function also works with other elements if you need it to.

这为状态栏提供了一个“isHidden”属性,并使用它来检查我们是否显示或隐藏状态栏。如果需要,此功能也适用于其他元素。

(That that you can chain many jQuery commands, as I did once above with the 'stop' and 'animate' functions.)

(你可以链接许多jQuery命令,就像我上面用'stop'和'animate'函数做的那样。)

#1