Question

I’m having a problem with my code. It works fine when the cursur is over the div, but it doesn’ts stop on mouseout. Any ideas what I’ve done wrong? (I’m using the jquery-approach plugin)

$(document).ready(function() {
      $("#wrap p").hover(function () {      
  $("span.fg").approach({"opacity": 1,}, 100);
  $("span.fg").animate({fontSize: '15px'}, 300);
      $("span.bg").animate({fontSize: '8px'}, 300);
    },
     function () {      
       $(this).removeClass("hover");
      }  
   );   
});

HTML: (links are a href, I’m a new user)

<div id="wrap" class="">
<h2>Stuff</h2>
    <p class="on">
        <span class="bg">Lorem Ipsum has been the</span> 
        <link "#"><span class="fg"> industry’s standard</span></a> 
        <span class="bg">dummy text ever</span> 
        <link ="#"><span class="fg">since the 1500s,</span></a> 
        <span class="bg">when an unknown printer took a galley of type and</span> 
        <link ="#"><span class="fg">scrambled it</span></a> 
        <span class="bg">to make a type specimen book.</span>
        <link ="#"><span class="fg">scrambled it</span></a> 
        <span class="bg">to make a type specimen book.</span>
    </p>
</div>

Answer 1

You have not assigned class hover, you have called jquery method hover.

You need to either refactor and create a class (eg myHover, then add and remove), or set the spans back to their orignal value using the hover method like so:

$(document).ready(function() {
      $("#wrap p").hover(
      function () {      
      $("span.fg").approach({"opacity": 1,}, 100);
      $("span.fg").animate({fontSize: '15px'}, 300);
      $("span.bg").animate({fontSize: '8px'}, 300);
    },
     function () {      
        $("span.fg").approach({"opacity": 0,}, 100); //change back to orginal value
        $("span.fg").animate({fontSize: '10x'}, 300); //change back to orginal value
        $("span.bg").animate({fontSize: '4px'}, 300); //change back to orginal value
      }  
   );   
});