我正在研究一些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));
});
});
});