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
}
});
How to say JQuery: DO THE 2nd thing when you're not hovering the div > img anymore..?
The second function you pass to .hover()
is the mouseleave
handler, like this:
$('.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()
takes 2 handlers - for mouseenter
and mouseleave
, or like you had, a single handler that does both. But since you want hover "in and out" behavior...use the 2 handler version.
the jQuery .hover()
method can take 2 arguments (see here: http://api.jquery.com/hover/).
.hover( handlerIn(eventObject), handlerOut(eventObject) )
handlerIn(eventObject) - A function to execute when the mouse pointer enters the element. handlerOut(eventObject) - A function to execute when the mouse pointer leaves the element.
精彩评论