jQuery Sliding Sidebars

Question

我正在研究一些jquery，它会在悬停时在窗口两侧的2个100％侧边栏中滑动（有一个10px的覆盖区域）。

如果任何一个条形码都是硬编码的话，我可以让它工作，但是，我正在尝试组合代码，当我这样做时，脚本不起作用。我不确定它是否与将值传递到.animate（）函数或者是什么有关。我在控制台中没有收到任何错误消息。

这是代码的小提琴：http://jsfiddle.net/u3XGF/

或许这是一个简单的人会立即发现的事情：

HTML

<div id="sb-left" class="sidebar"></div>
<div id="workspace">
<div id="sb-right" class="sidebar"></div>​

CSS

html, body { width: 100%; height: 100%; overflow: hidden; }

.sidebar { position: absolute; height: 100%; z-index: 99; }
.sidebar#sb-left { width: 300px; left: -290px; background: red; }
.sidebar#sb-right { width: 175px; right: -165px; background: green; }

#workspace { margin: 0 10px; height: 100%; background: #1a1a1a; z-index: 1; }

JQuery的

$(function(){

  $('.sidebar').each(function(){

    // Slide
    if($(this).attr('id')=='sb_left'){ var side='left'; var width=300; var push_margin='margin-left'; }
    else{ var side='right'; var width=175; var push_margin='margin-right'; }

    $(this).hover(function() {
        var timeout = $(this).data("timeout");
        if(timeout){ clearTimeout(timeout); }
        $(this).animate({side:'0px'},300,'easeOutQuart');
        $('#workspace').animate({push_margin:width+'px'},300,'easeOutQuart');
     },function() {
        $(this).data("timeout", setTimeout($.proxy(function() {
            $(this).animate({side:'-'+(width-10)+'px'},300,'easeOutQuart');
            $('#workspace').animate({push_margin:'10px'},300,'easeOutQuart');
        },this), 300));
     });

  });

});​