Question

I’m in need of some help :s
I want two animations to launch when I hover a div (it’s a button, the top part I want a fade in color, the bottom part a rolldown opacity). I checked a couple of questions here, and I understand how it’s supposed to work, but I’m really new to jquery and I’m stuck in how to make two things work at once… and in where I should put the hover action.

These are the two scripts I want to convert to one:

ROLLDOWN:

$(function() {
    $('.hoverImg').css({"top" : "-170px"});
    $('.jwrap').hover(function() {
        $(this).children('.hoverImg').stop()
            .animate({"top" : "0"}, 300);
    }, function() {
        $(this).children('.hoverImg').stop()
            .animate({"top" : "-170px"}, 300);
    });
});

FADE:

$(document).ready(function(){
    $("img.a").hover(function() {
        $(this).stop().animate({"opacity": "0"}, "slow");
    }, function() {
        $(this).stop().animate({"opacity": "1"}, "slow");
    });
});

And this is the html:

<div class="jwrap">
    <img src="image/Q1bigOff.png" alt="Image1"  />
    <img src="image/Q1bigOn2.png" alt="Image2" class="hoverImg" />
</div>

<div class="fadehover">
<img src="image/Q1Off.png" alt="" class="a" />
<img src="image/Q1On.png" alt="" class="b" />
</div>

now, I’m guessing I could make a big on top of both effects and make my actions launch when I hover it? If you could help me wth that code… I would be terribly thankful.

Answer 1

I believe here is what you want to do:

http://jsfiddle.net/CVfLp/3/

I moved the animations over to functions so we can trigger them whereever we want. Using the jquery find method I made sure I only animate the child elements of the parent div. You need to wrap this with a jquery select function to get access to the jquery function like so: $(this).

Changed the background for the parent div to red for testing purposes.