http://jsfiddle.net/mstefanko/w5aAn/877/
Below, i'm achieving the effect I wanted, but with a pending issue. Since i'm using a separate span and positioning it absolute over-top of a
box with relative position. I can not access the inputs until after the animation is finished. I'm guessing the only way to alleviate this would be do something similar with just animating the border of the outer box? But nothing I was doing to animate box-shadow:inset was working.
HTML
<div id="wow">
<span id="pulse"></span>
<input id="form-input"/>
<input id="form-input"/>
</div>?
CSS
#wow {
width: 500px;
height: 200px;
display: inline-block;
position: relative;
border: 1px solid black;
}
#pulse {
width: 100%;
height: 100%;
box-shadow:inset 0 0 20px #6c95c3;
-moz-box-shadow:inset 0 0 10px #6c95c3;
position: absolute;
z-index: 20000;
}
JS
$('#pulse').stop().animate({"opacity": 0}, "fast");
$('#pulse').effect("pulsate", { times:4 }, 500, function() {
$(this).remove();
});
