JQuery - Do this if you're NOT .hover this div

css, hover, javascript, jquery, jquery-animate

Solution

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.

Problem

``` 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..?

Original source