0

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

  });

});​
4

0 回答 0