当鼠标悬停在内部链接上时，jQuery 淡入淡出段落

Question

我有这样的代码：

<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>

当鼠标悬停在链接上达到一定的不透明度时，我想淡出除锚标记中的文本之外的段落中的所有其他文本，然后在悬停时使其再次正常。我想在 jquery 中做到这一点。我正在做这样的事情：

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

但它不起作用！请帮助大家......
我知道这种技术是完全错误的......但如果你能做到的话

Answer 1

不透明度影响受影响元素的所有子元素。

您需要为 color 属性（alpha 通道）的不透明度设置动画。

为此，您需要一个支持 rgba 的浏览器（不是 IE）和一个插件来完成此操作。

jQuery UI 将 animate 方法^docs 扩展为允许将动画设置为 color 和 background-color，但尚不支持 rgba 版本。

因此，您可以使用 http://pioupioum.fr/sandbox/jquery-color/ 的插件 并

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

在 http://jsfiddle.net/gaby/hfc83/ 处进行示例

Answer 2

这应该是跨浏览器的，只需用 span 包裹段落中的所有文本（段落内的 a 元素除外），然后淡出 span 元素。

我使用可见性将链接保留在段落的位置，否则它会跳转到段落的开头，因为跨度是通过 display:none 隐藏的。

您可以在 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();
   }
);