Jquery targeting / Hover problem

I have two divs, on hover span class=fg grows and changes opacity, span class=bg shrinks, and when you mouseout it returns to the original state.

My problem is in two parts:

1: When hovering over the first div, the same action happens in the second.

2: The hover isn't constrained to the divs, but happens whenever the mouse moves on the page.

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>
      开发者_StackOverflow中文版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;}

The id must be unique, change #wrap to .wrap. Also in your selector you need to give it context of where to find the element otherwise it will target every element with that class. You can achieve this by either passing in this or using 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 also assumes that the parent is a <div> and not a shared parent <div> (e.g. they are not both nested in the same parent)

Example on jsfiddle

dont use same id for 2 elements

$("#wrap").parent() - is the parent, and you must use $("#wrap") element

To make animations sequential in jQuery, you should write your second animation function as the callback of the first animation.

These animations are parallel (they both start at the same time)

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

But here, the second animation starts when the first animations is done:

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