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

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

在mouseleave div上切换marginTop

1 个答案: