Jquery FadeIn悬停在一个元素上，然后在mouseout上淡出第二个元素

Question

我读了每一个相关的帖子，似乎没有解决我的问题。我有一个div，我想把鼠标悬停在它上面，然后出现了第二个div，但是我想让鼠标离开第二个div，而不是第一个div。我使用的代码从http://blogswizards.com/jquery-fade-in-fade-out-effect为基础，但我正试图把它做我想要的。我是Jquery的新手，这让我很困惑。有人能帮忙吗?

 $(function() {
// OPACITY OF DIV SET TO 0%
$(".panel").css("opacity","0.0");
// ON MOUSE OVER
$(".trigger").hover(function () {
// SET OPACITY TO 100%
$(".panel").stop().animate({
opacity: 1.0}, "slow");
},
// ON MOUSE OUT
$(".panel).mouseout(function () {
// SET OPACITY BACK TO 0%
$(this).stop().animate({
opacity: 0.0}, "slow");
});
});

Answer 1

您使用的悬停函数有两个参数，一个用于mouseenter，一个用于mouseleave，但它们应用于同一个元素。您可以这样做，将事件侦听器绑定到不同的元素。

$(function() {
 // OPACITY OF DIV SET TO 0%
 $(".panel").css("opacity","0.0");
 // ON MOUSE ENTER, PREVENT EVENT BUBBLING
 $(".trigger").mouseenter(function () {
  // SET OPACITY TO 100%
  $(".panel").stop().animate({
   opacity: 1.0}, "slow");
  }
 });
 // ON MOUSE LEAVE
 $(".panel").mouseleave(function () {
  // SET OPACITY BACK TO 0%
  $(this).stop().animate({
  opacity: 0.0}, "slow");
 });
});

Answer 2

好像你的代码出了点问题:

应该是这样的:

$(document).load(function() {
    // OPACITY OF DIV SET TO 0%
    $(".panel").css("opacity","0.0");
    // ON MOUSE OVER
    $(".trigger").hover(function () {
        // SET OPACITY TO 100%
        $(".panel").stop().animate({
            opacity: 1.0
        }, "slow");
    },function(){});
    // ON MOUSE OUT
    $(".panel").mouseout(function () {
        // SET OPACITY BACK TO 0%
        $(this).stop().animate({
            opacity: 0.0
        }, "slow");
    });
});

Answer 3

http://jsfiddle.net/PvVg9/

看我为这个做的小提琴

$('.trigger').mouseover(function() {
    $('.panel').fadeIn(function() {
        $(this).one('mouseover', function() {
           $(this).fadeOut();
        });
    });  
});