Jquery FadeIn hovering over one element and fading out of second element on mouseout

I have read every related post and nothing seems to fix my problem. I have a div that I want to hover over and a second div appears but I want the mouseout on the second div not on the first. I am using the code from http://blogswizards.com/jquery-fade-in-fade-out-effect as a base but I am trying to tweek it to do what I want. I am pretty new to Jquery and this has stumped me. Can anyone help?

 $(function() {
// OPACITY OF DIV SET TO 0%
$(".panel").css("opacity","0.0");

// ON MOUSE OVER
$(".trigger").hover(function () {

// SET OPACITY TO 100%
$(".p开发者_运维知识库anel").stop().animate({
opacity: 1.0}, "slow");
},

// ON MOUSE OUT
$(".panel).mouseout(function () {

// SET OPACITY BACK TO 0%
$(this).stop().animate({
opacity: 0.0}, "slow");
});
});

---

The hover function your using has two arguments, one for mouseenter and one for mouseleave, but they apply to the same element. You can do something like this to bind event listeners to different elements.

$(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");
 });
});

---

Seems like your code went a bit wrong:

It should look like this:

$(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");
    });
});

---

http://jsfiddle.net/PvVg9/

See the fiddle I made for this.

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