How do I make this mouseover effect? with hopefully jquery....

Question

For a perfumer's website I'm displaying a row of nine bottles on a shelf. It appears as one continuous photograph. I've cut it into nine seamless slices, each in its own table cell with its own id.

I'm thinking to use jQuery as I want the following on rollover:

* Bottle blitzes instantaneously bright also triggers short sound file.
* After a millisecond or two, returns to normal state.
* Action repeats only if blurred and re-moused over.
* Effect the same for each of the 9 bottles.

Mousedown (click) probably doesn't need an effect, just targets that particular bottle's page into the front page's iframe. I've made 9 alt. slices that are white-outs, but don't know how to write script with timed effect.

Flash? Please, don't even go there; it makes me plain nuts. OTOH, I find jQuery to be elegant.

Answer 1

function pause(milis) 
{
var date = new Date();
var cur_date = null;

do { cur_date = new Date(); } 
while(cur_date-date < milis);
} 

Function pause() will allow you to delay effect.

$('.bottle').hover(
  function(){/*blitz and play*/}, //executed when mouse pointer enters the element
  function(){pause(2); /*deblitz*/})//executed when mouse pointer leaves the element