Question

Given the following:

ul li .main .meta {opacity:0;}

<ul>
<li>  <span class="main">TITLE</span> <span class="meta">meta</span>  </li>
<li>  <span class="main">TITLE 2 </span> <span class="meta">meta</span>  </li>
<li>  <span class="main">TITLE 3</span> <span class="meta">meta</span>  </li>
etc... long list...
</ul>

What kind of JQUERY magic can I do so that whenever a user mouses over AnyWhere in the LI, the SPAN with the class=META, changes to Opacity:1, and when the user moves their mouse off that LI that LI’s meta goes back to Opacity:0, and the new LI’s meta goes to Opacity 1. etc….

Thanks!

Answer 1

There are a couple of issues here. The simplest implementation is:

$("li").hover(function() {
  $(this).find("span.meta").stop().fadeIn();
}, function() {
  $(this).find("span.meta").stop().fadeOut();
});

which will sort of work. The problem is that spans are inline elements and fadeIn() will change it to a block-level element.

Note: putting stop() in there is a good habit to get into otherwise you can get unintended effects if you quickly fire off several animations on the same target.

You can do this with classes too:

$("li").hover(function() {
  $(this).find("span.meta").removeClass("hidden");
}, function() {
  $(this).find("span.meta").addClass("hidden");
});

with:

span.hidden { display: none; }

but you lose the fade in and fade out effects this way. It does solve the display: block problem however.

You could alternatively animate() the opacity but opacity isn’t really supported on IE. See opacity:

IE compatibility note

If you want opacity to work in all IE
versions, the order should be:

.opaque {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
  filter: alpha(opacity=50);                    // second!
}

If you don’t use this order,
IE8-as-IE7 doesn’t apply the opacity,
although IE8 and a pure IE7 do.

This code looks something like this:

$("li").hover(function() {
  $(this).find("span.meta").stop().animate({opacity: 0.0});
}, function() {
  $(this).find("span.meta").stop().animate({opacity: 1.0});
});

One question you have to answer is: do you want the “meta” content to not be rendered or just not be visible? There’s a difference. To not be rendered is like display: none. To not be visible is like opacity: 0 which could potentially confuse the user since the text will still be selectable.

IMHO I think you’d be better off accepting the block nature of the display or to use a tooltip (even a rich tooltip) instead.