0

divを上下にスライドさせるトグル機能があります..しかし、マウスリーブでmarginTop -200をトグルするにはどうすればよいですか

マウスリーブ用に別の機能が必要ですか?

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

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

1 に答える 1

0

セレクターで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();    
});​

テスト

* 2012 年 12 月 22 日更新 *

私は提供されたコードしか持っていないので、これを試してください：

テスト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);
        });        
});
于 2012-12-21T23:07:03.537 に答える