jQuery的鼠标悬停鼠标离开

Question

HTML

<div id="div-1">I'm div-1</div> 
<div id="div-2">I'm div-2</div> 

JS

$("#div-1").bind('mouseover',function(event){ 
    $('#div-2').stop(true,true).fadeIn(100); 
}); 
$('#div-2').bind('mouseleave', function(e) { 
    $(this).stop(true,true).fadeOut(100); 
}); 

我的问题是：如何淡出的＃DIV-2。如果我在＃DIV-1鼠标离开？ 我目前正在使用jquery 1.2.6，我无法更改版本。

编辑

jsfiddle example

Answer 1

解决方案1：

你可以换你的元素和对包装添加事件处理程序。
这样你避免不同元素mousein/mouseout事件处理程序冲突：

HTML：

<div id="wrapper"> 
    <div id="div-1">I'm div-1</div> 
    <div id="div-2">I'm div-2</div> 
</div> 

JS：

$('#wrapper').hover(
    function(){$('#div-2').stop().fadeIn(100);}, 
    function(){$('#div-2').stop().fadeOut(100);} 
); 

这里有一个现场演示：

http://jsfiddle.net/gion_13/JUFDA/2/

解决方案2：

如果您有要结合相同的事件处理程序的多个元素，你可以尝试像听对整个文档的事件和活动的目标与你选择的元素匹配。如果该事件是针对你的元素做一些事情（fadeIn），否则做其他事（fadeOut）：

var el = $("#div-1,#div-2").get(); 
$(document).bind('mouseover', function(event) { 
    var f = el.indexOf(event.target) === -1 
     ? 'fadeOut' 
     : 'fadeIn'; 
    $('#div-2').stop(true, true)[f](100); 
}); 

这里有一个现场演示：

http://jsfiddle.net/gion_13/JUFDA/1/

我知道这是不是最佳的解决方案，但它可能如果您想将功能扩展到其他dom元素，那么就派上用场了。

解决方案3：

这可能会造成您的mouseleave事件处理程序的执行上的第一个div，这种方式使事件处理程序，以不同的顺序执行：
来自：

1. $('#div-1').mouseleave()
2. $('#div-2').mouseover()
   到：
3. $('#div-2').mouseover()
4. $('#div-1').mouseleave()
   这样，你避免了事件处理冲突和，因为动画持续时间非常少（0.1秒）时，在第一个div的mouseleave事件处理程序执行的延迟并不明显：

$("#div-1") 
    .bind('mouseover',function(event){ 
     $('#div-2').stop(true,true).fadeIn(100); 
    }) 
    .bind('mouseleave',function(){ 
     setTimeout(function(){ 
      if(!$('#div-2').data('over_second')) 
       $('#div-2').stop(true,true).fadeOut(50); 
     },50); 
    }); 
$('#div-2') 
    .bind('mouseover',function(event){ 
     $(this) 
      .stop(true,true) 
      .fadeIn(100) 
      .data('over_second',true); 
    }) 
    .bind('mouseleave', function(e) { 
     $(this) 
      .stop(true,true) 
      .fadeOut(100) 
      .removeData('over_second'); 
    }); 

这里有一个现场演示：

http://jsfiddle.net/gion_13/JUFDA/3/

Answer 2

$("#div-1").bind('mouseover',function(event){ 
    $(this).stop(true,true).fadeIn(100); 
    $('#div-2').fadeOut(100); 
}); 
$('#div-1').bind('mouseleave', function(e) { 
    $(this).fadeOut(100); 
    $('#div-2').fadeIn(100); 
}); 

Answer 3

$("#div-1").bind('mouseover',function(event){ 
    $('#div-2').stop(true,true).fadeIn(100); 
}).bind('mouseleave', function(event){ 
    $('#div-2').stop(true,true).fadeOut(100); 
}); 
$('#div-2').bind('mouseleave', function(e) { 
    $(this).stop(true,true).fadeOut(100); 
});