jQuery li with image fade in background (fade in class)

Question

I'm currently using this code:

var gallery = $('ul#gallery').children();

$(gallery).filter(':even').not(':last').hover(function () {$(this).toggleClass('next')});

I'm trying to make it fade this new class in. Currently, there's an <li> with an image in it, no background. When the 'next' class is added, it gives it a background image when hovered over. Is there a way to just fade in the new class without making the image blink/fade at all?

I don't understand. Are you saying that you want the background image to appear, but have the other attributes of the `next` class animate? — user113716, May 17 '10 at 18:48
By the way, `gallery` is already a jQuery object. No need to do `$(gallery).filter(...`. Just do `gallery.filter(...`. — user113716, May 17 '10 at 18:49
I took off the $( and everything, thanks. No, not the next li, .next is the class given to this specific list item. I just want whatever

user113716 · Accepted Answer · 2010-05-17T22:28:05.047

3

If you have jQueryUI installed, you can ~~fade~~ animate a class by adding a duration.

$(this).toggleClass('next', 500);

http://jqueryui.com/demos/toggleClass/

But as far as I know, there is no separate opacity setting that affects only the background image. So if you want to fade that in, you would need to fade the entire element, which, as you stated, is not what you want.

If you really want the effect, an alternative may be to prepend a separate element to the one you were giving the class, and fade in that element (with its background image).

The element would need to have absolute positioning so that it doesn't affect the rest of the content.

You would end up with something like:

CSS:

li {
    position: relative;
}

.background {
    width: 100%;
    height: 100%;
    background:orange;  // This would be your background image instead
    position: absolute;
    top: 0;
    left: 0;
}

.content {
    position: relative;
}

HTML:

<ul id='gallery'>
        <li>
            <div class='background'></div>  // Prepend and fade in
            <div class='content'>hi there</div>
        </li>
</ul>

jQuery:

hover() takes two functions. One when you mouseenter, the other when you mouseleave.

// Set opacity to 0 for all .background elements $('.background').css({opacity: 0});

var gallery = $('ul#gallery').children();

gallery.filter(':even').not(':last').hover(
  function () {
       $(this).find('.background').animate({'opacity': 1}, 500);
  },
  function () {
       $(this).find('.background').animate({'opacity': 0}, 500);
});

EDIT:

FYI, you can change your selector to get what you want right away without having to call .filter(), and so on.

var gallery = $('ul#gallery li:even:not(:last)');

gallery.hover(...

EDIT:

Changed wording in first sentence and added link to docs.

edited May 17 '10 at 22:28

answered May 17 '10 at 20:31

user113716

318,772
63
451
440

There is no such thing as fading a CSS class – Nicolas Viennot May 17 '10 at 20:33
1

jQuery UI, which he mentioned using, allows you to fade between classes. Haven't used it yet personally, but apparently it finds all the style properties in both classes and then animates between each of those properties (the ones that have the ability to be animated, anyways). – Scott Christopherson May 17 '10 at 20:39
@Pafy - I changed the wording of the first sentence to be a little more accurate. It is technically animating between classes (although I think "fade" gets the point across). Added link to docs too. – user113716 May 17 '10 at 21:00
I've followed what you have above, but I can't get the jQuery code running at ALL. I've tried about 20 approaches and I can't get it to work. The closest I have to working is gallery.filter(':even').hover(function () {$('.background').fadeIn('slow')}); but it only fades in div.background and doesn't fade out, and it fades in every one on the page. – steve May 17 '10 at 22:01
Ah, just got it working with this: gallery.filter(':even').hover(function () {$('.background').fadeTo(0,0).fadeTo(500,1).toggleClass('next')}); but it still fades in every .background. How do I limit it to only this one? – steve May 17 '10 at 22:06
@steve - I'll update my answer. I assume you've added a background element to each `li`. – user113716 May 17 '10 at 22:12
Yep. The `li` looks like this:
retired rice field, donnelly wildlife management area

steve

May 17 '10 at 22:16

Updated my answer. Used `animate()` instead of `fadeTo()`. Either one will work. Did you still want to add the `next` class? In your comment above, you're adding it to the `.background` element. – user113716 May 17 '10 at 22:19

I was just doing that cause I couldn't figure out any other way haha. Now when the page loads, they're all visible until you hover over them. I tried to set the display to none, but then when you hover, nothing happens. – steve May 17 '10 at 22:21

With `.animate()` we're only changing the opacity. I added a line to my answer to set all `.background` elements to 0 opacity. If you're going to use `fadeIn()` and `fadeOut()`, you should be able to do `display:none;` in the css since those functions manage the `display` property for you as well. – user113716 May 17 '10 at 22:24

Awesome, I used fadeTo and fixed it with the display: none. Thanks for everything. – steve May 17 '10 at 22:28

You're welcome. I added one more edit regarding your selector. Off topic, though. – user113716 May 17 '10 at 22:28

I'd have to make a separate var for each "even" and "odd" right? The only problem with this is that I have another ul/li inside this one at the end (see here: http://www.studioimbrue.com/sites/eliotdudik) in the links section, and then all of this starts interacting with that because it's selecting all the li within the gallery. Any way to prevent that without having to use the children()? – steve May 17 '10 at 22:44

You mean in the selector I added? If so, yes. Just add `>` between the `ul#gallery` and `li`. `$('ul#gallery > li:even:not(:last)');` That selects only immediate children. Also, instead of `:last` it could be that you intend to use `last-child` as they are a little different. Not sure though. Very nice effect on the site, by the way. – user113716 May 17 '10 at 22:55

jQuery li with image fade in background (fade in class)

1 Answers1

Linked