Multiple effects on a banner animation using jQuery

Question

I'd appreciate some help with this problem I am having. I know it is a lack of syntax knowledge so I got it as far as I can.

I am pretty close with it, but I am having problems looping over the "solution-wrapper" class, adding a new class and then targeting that class in in one block of code.

// GOALS
// iterate over solution-wrapper elements and add a new class to target individually
// on hover of solution-wrapper minimise the width of black-cover by 50% and then 
   disappear
// hide the black-cover title and subtitle
// show the solution-description box
// On mouse out, return to the same status before hovering over

I have the following HTML/CSS/jQuery:

My code below, along with a semi working model over at js-fiddle here: http://jsfiddle.net/Rtsnj/6/#&togetherjs=wFpUyJO05G

   <div class="solution-wrapper"> 
        <span class="solution-description">
            <h3>Title</h3>
            <p>Solution Description</p>
            <a href="http://www.google.com">Google</a>
        </span>  
        <span class="black-cover">
            <h3>Banner Title</h3>
            <span>Banner Subtitle</span>
    </span>
        <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Campania_banner_View_from_Capri.jpg" width="910" height="200" />
    </div>

    <div class="solution-wrapper"> 
        <span class="solution-description">
            <h3>Title</h3>
            <p>Solution Description</p>
            <a href="http://www.google.com">Google</a>
        </span>  
        <span class="black-cover">
            <h3>Banner Title</h3>
            <span>Banner Subtitle</span>
        </span>
        <img src="http://upload.wikimedia.org/wikipedia/commons/b/b3/Campania_banner_View_from_Capri.jpg" width="910" height="200" />
    </div>

This is my CSS:

.solution-wrapper {
    position: relative;
    margin: 0 auto;
    width: 910px;
    height: 200px;
}
.solution-description {
    display: none;
    position: absolute;
    right: 0;
    width: 50%;
    background-color: white;
    height:100%;
}
.black-cover {
    position: absolute;
    background: url(http://landscapeamerica-patio.com/ESW/Images/semi_transparent_black2.png) repeat 0 0;
    width: 100%;
    height: 100%;
    color: white;
    padding: 30px 0 0 30px;
    h3 {
        font-family:'journalregular';
        font-size: 6.667em;
        color: white;
        padding: 0;
        margin: 0;
        line-height: 1;
        text-transform: none;
        font-weight: normal;
        b {
            font-weight: normal;
        }
    }
}

And this is my jQuery along with the goals I am trying to achieve

// GOALS
// iterate over solution-wrapper elements and add a new class to target individually
// on hover of solution-wrapper minimise the width of black-cover by 50% and then 
   disappear
// hide the black-cover title and subtitle
// show the solution-description box
// On mouse out, return to the same status before hovering over

jQuery(".solution-wrapper").hover(function () {
    jQuery(".black-cover").stop(true, false).animate({
        width: "50%"
    });
    jQuery(".black-cover h3 ").fadeOut(500);
    jQuery(".black-cover span ").fadeOut(500);
    jQuery(".solution-description ").fadeIn(500);
}, function () {
    jQuery(".black-cover").stop(true, false).animate({
        width: "100%"
    });
    jQuery(".black-cover h3 ").fadeIn(500);
    jQuery(".black-cover span ").fadeIn(500);
    jQuery(".solution-description ").fadeOut(500);
});

Answer 1

You need to use jQuery(this) to chose specific elements, otherwise you are selecting both elements with class

jQuery(".solution-wrapper").hover(function () {
    jQuery(this).find(".black-cover").stop(true, false).animate({
        width: "50%"
    });
    jQuery(this).find(".black-cover h3 ").fadeOut(500);
    jQuery(this).find(".black-cover span ").fadeOut(500);
    jQuery(this).find(".solution-description ").fadeIn(500);
}, function () {
    jQuery(this).find(".black-cover").stop(true, false).animate({
        width: "100%"
    });
    jQuery(this).find(".black-cover h3 ").fadeIn(500);
    jQuery(this).find(".black-cover span ").fadeIn(500);
    jQuery(this).find(".solution-description ").fadeOut(500);
});

DEMO