Jquery FadeIn 悬停在一个元素上并在鼠标移出时淡出第二个元素答案

【问题标题】：Jquery FadeIn hovering over one element and fading out of second element on mouseoutJquery FadeIn 悬停在一个元素上并在鼠标移出时淡出第二个元素
【发布时间】：2011-04-04 12:54:11
【问题描述】：

我已阅读所有相关帖子，但似乎没有任何问题可以解决我的问题。我有一个要悬停的 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");
});
});

【问题讨论】：

标签： jquery hover fadein fadeout

【解决方案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");
 });
});

【讨论】：

【解决方案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");
    });
});

【讨论】：

你是世界之王！！！你们都是！经过几个小时的愚蠢想法，我现在有了一些完全符合我想要的功能！谢谢！谢谢！谢谢！

【解决方案3】：

http://jsfiddle.net/PvVg9/

请看我为此制作的小提琴。

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

【讨论】：