0

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

Community
  • 1
  • 1
marky
  • 4,878
  • 17
  • 59
  • 103

1 Answers1

2

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.

musicinmyhead
  • 1,466
  • 9
  • 11
  • This performs as I need it to, but the highlighted part is a small box in the top/left corner of the HTML pane! Hopefully that's just a matter of css positioning - you mentioned relative and absolute positioning in your answer... I don't have time right now to mess with it, but I'll check it out after dinner. I'll let you know... – marky Jun 23 '11 at 20:26
  • Yes I only had time to check it in Chrome myself (which works fine), but you'll probably need to finagle the positioning a bit for IE and such when you have time, should be a little trial and error and you'll have it fixed. You can also use the "Position" jQuery UI Effect and that would probably work fine as well. – musicinmyhead Jun 23 '11 at 20:29
  • Surprisingly, it wasn't Chrome 12, Safari 5, or even IE 9 that were the problem - it was FF (4.x and 5). I took a look at the UI positioning effect, but am not at all familiar enough with the intricacies of positioning (even with a plugin!), so that'll take some "fiddling" to get it working right. Of course, if anyone wants to chip in on the jsFiddle, they're certainly welcome to! ;) – marky Jun 24 '11 at 00:44