javascript - jQuery不会在悬停时消失

Question

我有一张桌子，每次有人将鼠标悬停在一个单元格上时，我希望它变得不那么不透明（不透明度默认为 0.85）。这是我的代码：

$(document).ready(function(){

    $("td").hover(function(){

        $(this).fadeTo(700,1);

            },function(){

        $(this).fadeTo(500,0.85);

    }); 
});

编辑：问题似乎是当我悬停时没有触发任何东西，即使我添加alert('hi')到函数中，也没有任何反应

编辑2：如果有人仍然阅读这个问题，我相信当我问这个问题时它不起作用的原因是因为我正在异步创建 td 元素并且当页面加载时它们不存在。我相信我最终使用了 .on() 而不是 .hover()。此外，褪色到 1.0 的不透明度是想要的效果（我忘了它从 0.85 或 0.5 开始）。感谢大家

Answer 1

只需使用 CSS

td {
    opacity: .85;    
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
td:hover {
    opacity: .5;    
}

演示：http: //jsfiddle.net/maniator/bnrWK/

Answer 2

很简单，你的功能倒退了：

（你在鼠标悬停时衰减到 1，在鼠标悬停时衰减到 0.85）

$(document).ready(function(){

    $("td").hover(function(){

        $(this).fadeTo(500,0.85);

    },function(){

        $(this).fadeTo(700,1);

    }); 
});

这是一个小提琴：http: //jsfiddle.net/bZ3gX/

Answer 3

您正在淡入的不透明度 1.0 是完全不透明的，而不是透明的。

尝试让它褪色到 0.5

Answer 4

在悬停工作之前，您可能必须预定义表格单元格的不透明度。

table tr td {
    background: grey;
    opacity: 0.5;
    -webkit-opacity: 0.5;
}

其余的只是使用您的 jQuery 代码。

jsfiddle：http: //jsfiddle.net/vdHDD/1/

Answer 5

你也可以使用 css 转换

td:hover {
        opacity: 1;
        -webkit-transition: opacity .7s ease-in-out;
        -moz-transition: opacity .7s ease-in-out;
        -ms-transition: opacity .7s ease-in-out;
        -o-transition: opacity .7s ease-in-out;
        transition: opacity .7s ease-in-out;
    }
td{
opacity:.85;
}

Answer 6

http://jsfiddle.net/D96PA/4/

不知道为什么将第二个函数设置为 0.85 而不是 0.5。我把它改成0.5。让我知道这是否是你要找的。

$(document).ready(function(){

        $("td").hover(function(){

            $(this).fadeTo(700,1);

                },function(){

            $(this).fadeTo(500,0.5);

        }); 
    });