Jquery定位/悬停问题

Question

我有两个divs，悬停时span class=fg增长并改变不透明度，span class=bg收缩，当mouseout返回原始状态。

我的问题分为两部分：

1：当鼠标悬停在第一个div上时，第二个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;}

Answer 1

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上的示例

Answer 2

不要对两个元素使用相同的id

$("#wrap"(.Pparent((-是父级，必须使用$("#wrap"(元素

Answer 3

要在jQuery中使动画按顺序排列，您应该编写第二个动画函数作为第一个动画的回调。

这些动画是平行的(它们同时开始(

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

但在这里，第二个动画在第一个动画完成时开始：

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