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

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

0 голосов
/ 04 апреля 2011

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

Ответы [ 3 ]

0 голосов
/ 04 апреля 2011

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

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

$(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");
    });
});
0 голосов
/ 04 апреля 2011

http://jsfiddle.net/PvVg9/

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

$('.trigger').mouseover(function() {
    $('.panel').fadeIn(function() {
        $(this).one('mouseover', function() {
           $(this).fadeOut();
        });
    });  
});
0 голосов
/ 04 апреля 2011

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