Toggle marginTop on mouseleave div

Question

我有一个切换函数，可以上下滑动div。

我应该有一个单独的熔点功能吗？

$(document).ready(function() {
    $('.menu-item-40').toggle(
    function() {
        $('#slidenav').animate({
            marginTop: '0'
        }, 500);
    }, function() {
        $('#slidenav').animate({
            marginTop: '-200px'
        }, 500);
    });
});​

Answer 1

使用div选择器上的mouseleave事件。然后应用我为您创建的自定义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();    
});​

test

*更新22/12/12 *

由于我只提供了代码，请尝试以下操作：

test2

// 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);
        });        
});