CODEWITHSUNDEEP
javascriptjqueryhtmlfadeinfadeout
user1248192
user1248192

Reputation: 3

Jquery Fade in & out issue

I have some code below showing my JQUERY & HTML. Basically I have tried to get an image to FADE IN on hover and FADE OUT once the cursor is off the image.

PROBLEM is that I want the image that will be FADING IN to be on top of the original image. Once the new image FADES IN it goes back to the original straight away as the cursor is no longer on the image that executes the FADE animation.

I would appreciated any info what so ever :)

Thanks :)

JQUERY:

$(document).ready(function() {
$("div.hover").hover(

function() {
    $("div.fade").fadeIn('slow');
}, function() {
    $("div.fade").fadeOut('slow');
});
});

HTML:

<div class="hover"><img src="#"/></div>
<div class="fade"><img src="#"/> </div>

Upvotes: 0

Views: 323

Answers (1)

Fenton
Fenton

Reputation: 250922

If you put the hover class on an element that contains both the image and the hover image, it will still be classed as "hovering" whichever image you hover over:

<div class="hover">
    <div><img src="#"/></div>
    <div class="fade"><img src="#"/> </div>
</div>

Upvotes: 2

Related Questions