Question

cardh = 0

$('.cardgreen > img').hover(function () {
    if (cardh == 0) {
        $('.card > img').animate({ height: 150, width: 193, opacity: '1', left: 0, top: 9 }, 500);
        $('.anfahrtlink').animate({ opacity: '0' }, 500).animate({ width: 0 }, 0);
        $('.cardgreen > img').animate({ opacity: '0' }, 500).animate({ opacity: '1' }, 500);
        cardh = 1
    }
});

$('.cardgreen > img').notanymore().hover(function () {
    if (cardh == 1) {
        $('.cardgreen > img').animate({ opacity: '0' }, 300);
        $('.anfahrtlink').animate({ width: 84 }, 0).animate({ opacity: '1' }, 500);
        $('.card > img').animate({ opacity: '1' }, 300).animate({ opacity: '0', width: 0, height: 0, left: 194, top: 75}, 270);
        cardh = 0
    }
});

怎么说JQuery：当你没有徘徊div时做第二件事＆gt; img了..？

Answer 1

传递给.hover()的第二个函数是mouseleave处理程序，如下所示：

$('.cardgreen > img').hover(function() {
  $('.card > img').animate({height: 150, width: 193, opacity: '1', left: 0, top: 9},500)
  $('.anfahrtlink').animate({opacity: '0',},500).animate({width:0},0);
  $('.cardgreen > img').animate({opacity: '0'},500)
                       .animate({opacity: '1'},500);
}, function() {
    $('.cardgreen > img').animate({opacity: '0'},300);
    $('.anfahrtlink').animate({width:84},0).animate({opacity: '1',},500)
    $('.card > img').animate({opacity: '1'},300)
                    .animate({opacity: '0', width: 0, height: 0, left:194, top:75},270);
});

.hover()需要2个处理程序 - 对于mouseenter和mouseleave，或者就像你拥有的那样，只有一个处理程序。但是，因为你想要“进出”行为......使用2处理程序版本。

Answer 2

jQuery .hover()方法可以带2个参数（参见这里：http://api.jquery.com/hover/）。

.hover( handlerIn(eventObject), handlerOut(eventObject) )

handlerIn（eventObject） - 鼠标指针进入元素时执行的函数。 handlerOut（eventObject） - 当鼠标指针离开元素时执行的函数。

JQuery - 如果你不是这个div，请这样做

2 个答案: