1

私には2つdivsあります。ホバーspan class=fgすると、不透明度が大きくなり、不透明度が変わり、span class=bg縮小しmouseoutます。元の状態に戻ると、

私の問題は2つの部分にあります：

1：最初のdivにカーソルを合わせると、2番目の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：

<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);}   
 ); 
});

CSS：

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;}
4

3 に答える 3

2

はid一意である必要があります。 に変更#wrapして.wrapください。また、セレクターでは、要素を見つける場所のコンテキストを与える必要があります。そうしないと、そのクラスのすべての要素がターゲットになります。これは、渡すthisか使用することで実現できます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);
});

<div>これはまた、親が共有された親<div>ではなく、同じ親にネストされていないことを前提としています。

jsfiddle の例

于 2011-07-06T11:49:04.873 に答える
0

jQueryでアニメーションをシーケンシャルにするには、最初のアニメーションのコールバックとして2番目のアニメーション関数を作成する必要があります。

これらのアニメーションは並行しています（両方が同時に開始されます）

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

ただし、ここでは、最初のアニメーションが完了すると2番目のアニメーションが開始されます。

$('#first').animate({'left':'50px'}, function(){
    $('#second').animate({'left':'100px'});
});
于 2011-07-06T11:50:33.093 に答える
0

2 つの要素に同じ ID を使用しないでください

$("#wrap").parent() - 親であり、 $("#wrap") 要素を使用する必要があります

于 2011-07-06T11:44:50.610 に答える