0

I'm working on a web site (currently in the planing & designing stage), and I have a bunch of tables with an background-image set to it. It would be nice (desing-wise) to animate the background image opacity on mouse over. As I can see in the jQuery API - this can not be done. (or can it?)

So I've come up with another not so clean "solution".

So my question is - could this work? -> (jQuery pseudocode)

for each table in body
set cloneOfMyImage.Postition = table.Position
set cloneOfMyImage.Height = table.Height
set cloneOfMyImage.Width = table.Width
set cloneOfMyImage.Opacity = 0

Basically -> I create a "clone" of the "background" image in the same position as each table, with the same size as each table, and make it look like the background is appearing on mouse over.

Thank you for your time.

Andrej
  • 351
  • 2
  • 6
  • 12
  • Do you want to have the opacity of the background image fade or switch between two values? If it's the latter, then it probably be easiest if you just use two PNGs with different alpha transparency values and switch between the two. – RoToRa Jan 09 '11 at 21:09
  • i want to have the opacity of the background image fade. I know how I can do this by for eg. switching the css from one (with image1) to another (with image2), but i think animation will have a nicer effect.. – Andrej Jan 09 '11 at 21:11

1 Answers1

0

This would work, but would also put a lot of weight on the browser if you have a lot of tables, because of DOM Reflow, of course this will depend on the browser and the computer but i'm guessing you want this to work very fluid for every user.

Maybe want to consider animating the background position of the image to create an animation.

Community
  • 1
  • 1
amosrivera
  • 26,114
  • 9
  • 67
  • 76
  • yeah, I JUST came across that same article! Plus, http://plugins.jquery.com/project/backgroundPosition-Effectthis ... I think i'll go with that.. It would look better with the opacity animation, but from what I see, this is way easier to implement. Thanks! – Andrej Jan 09 '11 at 21:21