Jqueryターゲティング/ホバーの問題

Question

私はホバリング時にdivsを2つ持っています。span class=fgは不透明度を変更して変更します。span class=bgはmouseoutに元の状態に戻ります。

1：

私の問題は、二つの部分にある最初のdivの上にマウスを移動すると、同じアクションは、第二に起こります。

2：ホバーはdivに制約されませんが、マウスがページ上を移動するたびに発生します。

HTML：

<div id="wrap"> 
    <h2>Subtitle</h2> 
    <p> 
     <span class="bg">Lorem Ipsum has been the</span> 
     <a href="#"><span class="fg"> industry’s standard</span></a> 
     <span class="bg">dummy text ever</span> 
     <span class="fg">since the 1500s,</span> 
     span class="bg">when an unknown printer took a galley of type and</span> 
    </p> 
</div> 

<div id="wrap" class=""> 
    <h2>Stuff #2</h2> 
    <p> 
     <span class="bg">Lorem Ipsum has been the</span> 
     <span class="fg"> industry’s standard</span> 
     <span class="bg">dummy text ever</span> 
     <span class="fg">since the 1500s,</span> 
     <span class="bg">when an unknown printer took a galley of type</span> 
    </p> 
</div> 

のjavascript： CSS

<script type="text/javascript"> 
$(document).ready(function() { 

    $("#wrap").parent().hover (function() {  
    $("span.fg").animate({"opacity": 1, fontSize: '14px'}, 300); 
    $("span.bg").animate({fontSize: '7px'}, 300); 
}, 
    function() { 
    $("span.fg").animate({"opacity": .5, fontSize: '12px'}, 100); 
    $("span.bg").animate({fontSize: '12px'}, 100);} 
); 
}); 

：

body {background: #000;color: #FFF;font-family: Helvetica, sans-serif;} 
p  {font-size:12px;} 
#wrap { width: 300px; 
    height: 150px; 
    cursor: pointer; 
    margin: 30px auto; 
    overflow:hidden; 
     } 
a  {text-decoration:none; color:inherit;} 
.bg {color:#999; opacity: 0.4;} 
.fg {color:#999; opacity: 0.4;} 

Answer 1

を使う.wrapに#wrapを変更する必要があります。セレクタでは、要素を見つける場所のコンテキストを与える必要があります。そうでない場合は、そのクラスのすべての要素を対象とします。あなたはどちらか。これは、親が<div>なく<div>は、（例えば、それらの両方が同じ親にネストされていない）共有親

であることを前提としていfind()

$(".wrap").parent().hover(function() { 
    $("span.fg", this).animate({ 
     "opacity": 1, 
     fontSize: '14px' 
    }, 300); 
    $("span.bg", this).animate({ 
     fontSize: '7px' 
    }, 300); 
}, function() { 
    $("span.fg",this).animate({ 
     "opacity": .5, 
     fontSize: '12px' 
    }, 100); 
    $("span.bg",this).animate({ 
     fontSize: '12px' 
    }, 100); 
}); 

をthisに渡すか、使用してこれを達成することができますExample on jsfiddle

Answer 2

が2に同じIDを使用してはいけません要素

$（ "＃ラップ"）の親は（） - 。親である、あなたは、idは一意である必要があります$（ "＃ラップ"）要素

Answer 3

アニメーションをjQueryで連続させるには、最初のアニメーションのコールバックとして2番目のアニメーション関数を書き込む必要があります。

これらのアニメーションは

$('#first').animate({'left':'50px'}); 
$('#second').animate({'left':'100px'}); 

しかし、ここで（どちらも同時に開始）平行であり、最初のアニメーションが行われている第二のアニメーションが開始：

$('#first').animate({'left':'50px'}, function(){ 
    $('#second').animate({'left':'100px'}); 
});