jQuery抽屜與懸停和點擊功能

Question

我想實現一個抽屜效果使用jQuery。我的頁面由兩個重疊的div組成，其中頂部的div稍微偏移了一側，顯示了一些底部div。

當我將鼠標懸停在底部div上時，我希望頂部div稍微偏移，當我單擊底部div時，我希望頂部div在頁面上滑動。

演示：http://jsfiddle.net/hVts8/

我想不出什麼了是如何使它工作的另一種方式，那就是，如何申請轉換頂格，而它的「開放」？

代碼打開抽屜：

$('#bottom-page').on({ 
    mouseenter: function() { 
     $("#top-page").css({ 
      "-webkit-transform": "translate3d(15%,0,0)", 
       "transform": "translate3d(15%,0,0)" 
     }); 
    }, 
    mouseleave: function() { 
     $("#top-page").css({ 
      "-webkit-transform": "translate3d(10%,0,0)", 
       "transform": "translate3d(10%,0,0)" 
     }); 
    }, 
    click: function() { 
     $("#top-page").css({ 
      "-webkit-transform": "translate3d(90%,0,0)", 
       "transform": "translate3d(90%,0,0)" 
     }); 
     $(this).off('mouseenter mouseleave'); 
    } 
}); 

Answer 1

怎麼這樣呢？ （Fiddle）

enableDrawerHover(); 

$('#bottom-page').on({ 
    click: function() { 
     if ($(this).hasClass('open')) { 
      $("#top-page").css({ 
       "-webkit-transform": "translate3d(10%,0,0)", 
       "transform": "translate3d(10%,0,0)", 
      }); 
      $(this).removeClass('open'); 
      enableDrawerHover(); 
     } 
     else { 
      $("#top-page").css({ 
       "-webkit-transform": "translate3d(90%,0,0)", 
       "transform": "translate3d(90%,0,0)", 
      }); 
      $(this).addClass('open'); 
      $(this).off('mouseenter mouseleave'); 
     } 
    } 
}); 

function enableDrawerHover() { 
    $('#bottom-page').on({ 
     mouseenter: function() { 
      $("#top-page").css({ 
       "-webkit-transform": "translate3d(15%,0,0)", 
       "transform": "translate3d(15%,0,0)" 
      }); 
     }, 
     mouseleave: function() { 
      $("#top-page").css({ 
       "-webkit-transform": "translate3d(10%,0,0)", 
       "transform": "translate3d(10%,0,0)" 
      }); 
     } 
    }); 
}