CODEWITHSUNDEEP
jquerycssjquery-animatefadeinfadeout
Keoki
Keoki

Reputation: 304

Fade In/Out Background Image with Another Image / fade out other elements

I'm having trouble with fadein/out of some elements. I need to have several divs, fade in a new background, as well as text when it is hovered over. I also need to have the other divs to fade out some, while I'm hovered over that element.

I can fade out the other elements if I'm hovered over an element, but the rest of the problem I cannot figure out.

I only want those specific divs to be affected as I have other divs (id and classes) on the page.

Here is my fiddle: http://jsfiddle.net/deelite/SnvMr/2/

My jquery:

$('div').hover(function() {
  $('div').not($(this)).stop().fadeTo(500, 0.33);
  }, function() {
  $('div').stop().fadeTo(500, 1);
});

I'm not sure how else to proceed.

Upvotes: 0

Views: 1085

Answers (2)

Keoki
Keoki

Reputation: 304

Thanks to Mooseman for his help on the code, I took it one step further, on how to do the background "change" by inserting a div (that contains the new background) into the div that contains the first background, and have the new div fade in/out over the old. The second div has to be the same "dimensions" as the original, unless you are going for an effect where the bg's must be offset from each other.

You can view the updated code here: http://jsfiddle.net/deelite/SnvMr/12/

JS CODE:

$('.effect').hover(
function () {
    $('.effect').not(this).stop().fadeTo(500, 0.33);
    $(this).find('div').stop().fadeTo(500, 1);
}, function () {
    $('.effect').stop().fadeTo(500, 1);
    $('.effect div').stop().fadeTo(500, 0);
});

thanks!

Upvotes: 0

Mooseman
Mooseman

Reputation: 18891

Just use .not(this); .not($(this)) is incorrect. You also had a couple other errors. You can just add another class (e.g., .effect) to the the divs you want to apply the effect to.

HTML:

<div class="effect one"><p>me</p></div>
<div class="effect two"><p>have</p></div>
<div class="effect three"><p>fun</p></div>

jQuery:

$('.effect').hover(
    function() {
        $('.effect').not($(this)).stop().fadeTo(500, 0.33);
    }, function() {
        $('.effect').stop().fadeTo(500, 1);
    }
);

Fiddle: http://jsfiddle.net/SnvMr/5/

Upvotes: 2

Related Questions