Typical code works like this:

$(...).hover(function () {});.

But it also needs to go away when it's loses it's hover. Is there a shorter way to do that than:

$("#x").hover(function () { troll(); });
$("#x").mouseout(function () { untroll(); });

I just feel that smart people over at jQuery have thought of that and there must be a function that fuses them both.
I tried something like this:

$(xxx)
        .hover(function () {
            $(xxx).animate({"opacity": 1});
        })
        .mouseout(function () {
            $(xxx).css({"opacity": 0});
        });

But that has long history of failures (item doesn't animate, then goes back to 0, then goes to 1, then smoothly warps to 0, it doesn't work, long story).

addClass() and removeClass() are not an option. Due to other CSS properties like "display: none".

Et cetera. Et cetera. Et cetera. Et cetera.

Member Avatar

Seems you mixed two different events. try:

$( xxx ).hover(
  function() {
    $( this ).animate({"opacity": 1});
  }, function() {
    $( this ).css({"opacity": 0});
  }
);

The hover event haas two params - one for hoverIn and one for hoverOut

Exactly that. Sometimes I bring back the idea to look up manual sometimes, instead of relying on own "knowledge".