Jquery mouseover mouseleave

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-1 中，如何淡出#div-2？我目前使用的是 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:

如果您想要在多个元素上绑定(bind)相同的事件处理程序，您可以尝试诸如监听整个文档上的事件并将事件的目标与所选元素进行匹配之类的操作。如果事件针对您的元素，则执行某些操作 (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:

您可以延迟第一个 div 上 mouseleave 事件处理程序的执行，这样就允许事件处理程序以不同的顺序执行:
来自:

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/