0

もう少し制御したいバインディングがあります。最初のコードは次のとおりです。

 $('#topnav').bind({

                            mouseenter: function() {
                                $("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'});
                            },
                            mouseleave: function() {
                                   $("#topnav").delay(2000).animate({opacity: 0.9, width: '310px', height: '33px'});
                            }

                            });

現在、人が「マウス入力」しているナビゲーションバーが非常に小さいため、マウスリーブを遅らせていることがわかります。マウスが一瞬離れると、マウスリーブイベントがトリガーされます。それをもう少しうまくコントロールしたいです。「マウスが#topnavdivを3秒未満離れて再入力した場合、マウスが離れることさえないふりをする」というある種のifステートメントが必要です。

これが意味をなさない場合は、明確にします。

ありがとう！

4

2 に答える 2

2

setTimeout()あなたはとでこれを達成することができますclearTimeout()：

var tout;
$('#topnav').bind({
  mouseenter: function() {
    clearTimeout(tout);
    $("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'});
  },
  mouseleave: function() {
    tout = setTimeout(function() {
      $("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'});
    }, 2000);
  }
});
于 2012-10-02T03:23:28.717 に答える
0

setTimeout（）とclearTimeout（）を利用する

var timeout = null
var onMouseEnter = function(){
  clearTimeout(timeout)
  $("#topnav").animate({opacity: 1.0, width: '98%', height: '38px'}) 
}

var onMouseLeave = function(){
  timeout = setTimeout(function(){
    $("#topnav").animate({opacity: 0.9, width: '310px', height: '33px'});
  },1000)
}

$('#topnav').bind({ mouseenter: onMouseEnter, mouseleave: onMouseLeave })​

http://jsfiddle.net/gmhLZ/

于 2012-10-02T03:24:56.640 に答える