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