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 extends the animate method^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

这应该是跨浏览器，只是用段落包装段落中的所有文本，除了段落中的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();
   }
);

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

2 个答案: