使用 JQuery 使颜色消失，但保持框到位？ [复制]
Posted
技术标签:
【中文标题】使用 JQuery 使颜色消失，但保持框到位？ [复制]【英文标题】：Use JQuery to make color fade away, but keep boxes in place? [duplicate] 【发布时间】：2015-09-20 04:49:35 【问题描述】：我创建了一个 16x16 的网格。如果将鼠标悬停在一个框上，该框将变为粉红色。当你离开盒子时，整个盒子就消失了。我想这样当你离开盒子时，整个盒子保持原样，除了粉红色消失并在一秒钟左右后被原来的灰色取代。
html:
<head>
<title>SketchPad</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<h1> SketchPad </h1>
<div id="container">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.js"></script>
</body>
</html>
CSS：
h1
text-align: center;
color: black;
tr, td, table
border-style: solid;
border-width: 1px;
background-color: gray;
margin: auto;
height: 25px;
width: 525px;
JS：
var rows=16;
var cols=16;
document.write("<table>");
for (i=0; i<rows; i++)
document.write("<tr>");
for (j=0; j<cols; j++)
document.write("<td>"+"</td>");
document.write("</tr>");
document.write("</table>");
$( "td").css("color", "red");
$("td").hover(function()
$(this).css("background-color", "pink");
, function ()
$(this).fadeOut("slow", function()
);
);
【问题讨论】：
我玩过这些响应，而且我是新手，所以也许我做错了，但我要么没有任何效果，要么整个“td”元素在我开箱即用时消失。 【参考方案1】：为了获得跨浏览器支持的解决方案，您可以通过 javascript 使用动画。问题是大多数非数字属性无法使用普通 jQuery 进行动画处理（background-color 就是其中之一）
其中一个选项是使用jquery-color 插件
例子：
$("#go").click(function()
$("#block").animate(
backgroundColor: "#abcdef"
, 1500 );
);
$("#sat").click(function()
$("#block").animate(
backgroundColor: $.Color( saturation: 0 )
, 1500 );
);
OTOH，过渡支持在现代浏览器上非常好，所以如果你使用纯 CSS 解决方案（IE9 及以下不支持它），你会很安全
【讨论】：
有没有办法在不使用 jquery-color 插件或 css 的情况下做到这一点？ 您可以检查该插件的功能并复制与您相关的任何内容。另一种选择是使用 jquery-ui。如果您已经在使用它，那么您不需要额外的库【参考方案2】：您实际上可以使用 css 完成这一切。
h1
text-align: center;
color: black;
tr, td, table
border-style: solid;
border-width: 1px;
background-color: gray;
margin: auto;
height: 25px;
width: 525px;
td
transition: 1s background-color;
td:hover
background-color: pink;
工作演示：http://jsfiddle.net/5xvehb8o/
【讨论】：
我应该提到，我只需要一个 JQuery 或 JS 解决方案。【参考方案3】：.grid
height : 16px;
width : 16px;
border : solid 1px grey;
background-color : grey;
transition : 0.5s;
.grid:hover
background-color : pink;
<div class="grid"></div>
<br />
<div class="grid"></div>完整的 CSS 解决方案，可以在属性 transition 中修改过渡。
【讨论】：
您不需要两个transition 属性。您可以在.grid 上添加transition: 0.5s
已编辑感谢您对@maxm 的贡献。以上是关于使用 JQuery 使颜色消失，但保持框到位？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章