jQuery fade paragraph when hovering over an internal link

i have this code:

<p>
   Non in porttitor porta. Amet ridiculus? Adipiscing cum scelerisque aliquam, tortor ac mauris platea? Vel in amet non nec facilisis, phasellus.<br /> 
   Sagittis diam auctor ultricies in habitasse integer vel duis sociis rhoncus
   <a href="something.html">porttitor</a>?
</p>

i want to fade out all other text in the paragraph except the text in the anchor tag when hovered on the link to a certain opacity and then make it normal again when unhovered. i want to do this in jquery. i am doing something like 开发者_StackOverflowthis:

$(document).ready(function() {
    $('p a').hover(function() {
        $(this).parent('p').not('a').animate({
             opacity: "0.5"
        }, 3000);
        },
        function() {
        $(this).parent('p').not('a').animate({
             opacity: "1"
        }, 3000);
     });
 });

but it isnt working!! please help guys....

i know this technique is totally wrong... but if you can make it

Opacity affects all children of the affected element.

You would need to animate the opacity of the color property (the alpha channel).

To do that though you need an rgba capable browser (not IE) and a plugin to do it.

jQuery UI extends the animate method^docs to allow for animation to color and background-color but not for the rgba version yet.

So, instead, you can use the plugin at http://pioupioum.fr/sandbox/jquery-color/ and do

$(document).ready(function() {
    $('p a').hover(function() {
        $(this).parent('p').animate({
             color: 'rgba(0,0,0,0.5)'
        }, 500);
        },
        function() {
        $(this).parent('p').animate({
             color: 'rgba(0,0,0,1)'
        }, 500);
     });
 });

example at http://jsfiddle.net/gaby/hfc83/

This should be cross browser, just wraps all the text in the paragraph with a span except for the a element inside of the paragraph and then fades out the span elements.

I use the visibility to keep the link in place of the paragraph otherwise it jumps to the beginning of the paragraph because the spans are hidden with display:none.

You can check it out on http://jsfiddle.net/FQfmJ/13/

$("p a").hover(function(){
       var p =  $(this).parent();
       p.contents(":not(a)").wrap("<span />");

       p.find("span").fadeOut(function(){
            $(this).removeAttr("style").css("visibility","hidden");
       });
   },function(){   
       $(this).parent().find("span").removeAttr("style").hide().fadeIn();
   }
);