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：

如果您有多个要绑定相同事件处理程序的元素，则可以尝试在整个文档中侦听事件并将事件的目标与所选元素进行匹配。如果事件针对您的元素执行某些操作（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/

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