0

ホバー時にウィンドウの両側にある 2 つの 100% サイドバーにスライドする jquery のビットに取り組んでいます (10 ピクセルのオーバーレイ領域があります)。

どちらかのバーがハードコーディングされていれば動作させることができますが、コードを結合しようとしているのですが、そうするとスクリプトが動作しません。値を .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