Jquery FadeIn, наводящий курсор на один элемент и исчезающий из второго элемента при наведении мыши

Question

Я прочитал каждый связанный пост, и ничто, кажется, не решает мою проблему. У меня есть 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

Похоже, ваш код немного ошибся:

Это должно выглядеть так:

$(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 2

Используемая вами функция наведения имеет два аргумента, один для 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 3

http://jsfiddle.net/PvVg9/

Посмотри на скрипку, которую я сделал для этого.

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