使用jQuery的橫幅動畫的多種效果

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-小提琴在這裏工作模式上沿： 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以及目標I想實現

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