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，鼠标输出时淡出到.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);

        }); 
    });

jQuery不会在悬停时消失

6 个答案: