jquery - 在 mouseleave div 上切换 marginTop

Question

我有一个可以上下滑动 div 的切换功能。但是如何让它在 mouseleave 上切换 marginTop -200？

我应该有一个单独的mouseleave函数吗？

$(document).ready(function() {
    $('.menu-item-40').toggle(

    function() {
        $('#slidenav').animate({
            marginTop: '0'
        }, 500);
    }, function() {
        $('#slidenav').animate({
            marginTop: '-200px'
        }, 500);
    });
});​

Answer 1

使用选择器mouseleave上的事件div。然后应用toggleMargin我为您创建的自定义函数（我使用 +-20px 代替您想要的值）

<div id="div"></div>

// CUSTOM TOGGLEMARGIN FUNCTION
var t = true;
jQuery.fn.toggleMargin=function(){
  var lastmargin = $(this).css('margin-top').replace("px", "");
  var newMargin;
  if(t){
    newMargin = parseInt(lastmargin)+20;
    t=false;
  }
  else{
    newMargin = parseInt(lastmargin)-20;
    t=true;
  }
  // Now apply the margi-top css attr
  $(this).css('margin-top', newMargin );
}

// LET'S TOGGLE MARGIN ON YOUR DIV
$('#div').mouseleave(function(){
   $(this).toggleMargin();    
});​

测试

* 22/12/12 更新 *

因为我只有提供的代码，所以试试这个：

测试2

// CUSTOM TOGGLEMARGIN FUNCTION
var t = true;
jQuery.fn.toggleMargin=function(){
var lastmargin = $(this).css('margin-top').replace("px", "");
var newMargin;
if(t){
  newMargin = parseInt(lastmargin)+20;
  t=false;
}
else{
  newMargin = parseInt(lastmargin)-20;
  t=true;
}
// Now apply the margi-top css attr
$(this).css('margin-top', newMargin ); 
}

$('#slidenav').mouseleave(function(){
      $(this).toggleMargin();            
});

$('.menu-item-40').click(function(){
        $('#slidenav').toggle(function() {
        $(this).animate({marginTop: '0'}, 500);
        });        
});