Fade to transparent using jQuery highlight function

This thread seems to partially address my question, but there are no answers in that thread and most of the comments are more discussion and questions than trying to solve the OP's question...

The difference in my case from the above-mentioned post is that I have a background image that I need to fade to. As it is now, the color goes to my set color, fades to white, t开发者_如何学运维hen to the background image. You can see it in this jsFiddle.

Is there any way to transition from my set color, then straight to transparent, rather than to white and then transparent?

UPDATE:

After the comments with musicinmyhead I worked with UI's Position effect for a while and am still unable to get it to work in FF. I added the following code for the Position effect (see the updated jsFiddle in the link above):

$('.checkwrap').position({
    'my': 'left top',
    'at': 'left top',
    'of': $('#classesTable td:eq(0)')
});

Adding that had no "effect" (pardon the pun), so I'm wondering if I'm just getting the syntax wrong. I also tried messing with the css to see if that change anything - well, it did, but nothing that I did fixed it...

---

Since "transparent" isn't a color you probably won't be able to transition the background-color like that. Your best bet would be to append an element that is the same size as the table cell containing the checkbox and then animating that appended element from 100% opacity to 0% (simulating a transition from red to your background). You can then remove that element dynamically.

I've updated your jsFiddle so you can see what I'm talking about, a quick CSS class was added as well as making sure the "td" elements are styled to position:relative (otherwise the absolutely positioned appended div just goes all over the place).

Another quick note: There are a few other ways of doing this, such as sizing/positioning the appended element dynamically, and those would probably be a bit more elegant but this should suit your problem just fine for now.