Use JQuery to make color fade away, but keep boxes in place?

Question

I've created a 16x16 grid. If you hover your mouse over a box, the box will turn pink. When you leave the box, the entire box disappears. I would like to make it so when you leave the box, the entire box stays intact, except the pink color fades away and is replaced with the original gray color after a second or so.

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

I have played around with these responses and I am new so maybe I'm doing it wrong, but I either get no effect or the entire "td" elements disappear as I mouse out of the box. — DumplingKing, Jul 02 '15 at 15:18

Claudio Redi · Answer 1 · 2015-07-02T15:26:00.940

2

In order to have a cross-browser supported solution you could use animation trough javascript. Problem is that most of the properties that are not numeric can't be animated using plain jQuery (and background-color is one of those)

One of the options is to use jquery-color plugin

Example:

$("#go").click(function(){
    $("#block").animate({
        backgroundColor: "#abcdef"
    }, 1500 );
});
$("#sat").click(function(){
    $("#block").animate({
        backgroundColor: $.Color({ saturation: 0 })
    }, 1500 );
});

OTOH, transitions support is quite good on modern browsers so you'll be quite safe if you use a css only solution (IE9 and below doesn't support it)

edited Jul 02 '15 at 15:26

answered Jul 02 '15 at 15:16

Claudio Redi

67,454
15
130
155

is there a way to do this without using jquery-color plugin or css? – DumplingKing Jul 02 '15 at 15:42
You can check what that plugin does and copy whatever is relevant for you. Another option is using jquery-ui. If you're already using it, then you don't need an extra library – Claudio Redi Jul 02 '15 at 15:47

score 1 · Answer 2 · answered Jul 02 '15 at 15:16

1

You could actually accomplish this all with 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;
}

Working demo: http://jsfiddle.net/5xvehb8o/

answered Jul 02 '15 at 15:16

maxm

3,412
1
19
27

I should have mentioned, I need a JQuery or JS solution only. – DumplingKing Jul 02 '15 at 15:19

Anwar · Answer 3 · 2015-07-02T15:22:07.807

0

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

Full CSS solution, with transition that can be modified in property transition.

edited Jul 02 '15 at 15:22

answered Jul 02 '15 at 15:20

Anwar

4,162
4
41
62

You don't need two `transition` attributes. You can just have `transition: 0.5s` on `.grid` – maxm Jul 02 '15 at 15:21
Edited thank you for contrubuting @maxm. – Anwar Jul 02 '15 at 15:22

Use JQuery to make color fade away, but keep boxes in place?

3 Answers3