Question

我很感激我对这个问题有所帮助。我知道这是缺乏语法知识所以我尽可能地得到它。

我非常接近它，但是我在循环“解决方案包装”类时遇到问题，添加了一个新类，然后在一个代码块中定位该类。

// 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

我有以下HTML / CSS / jQuery：

我的代码如下，以及js-fiddle上的半工作模型： 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>

这是我的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;
        }
    }
}

这是我的jQuery以及我想要实现的目标

// 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

您需要使用jQuery(this)来选择特定元素，否则您将使用类

选择这两个元素

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

使用jQuery对横幅动画的多重效果

1 个答案: