javascript - jquery 动画 boxshadow

Question

http://jsfiddle.net/mstefanko/w5aAn/877/

下面，我实现了我想要的效果，但有一个悬而未决的问题。因为我使用了一个单独的跨度并将其绝对定位在具有相对位置的框的顶部。在动画完成之前我无法访问输入。我猜想缓解这种情况的唯一方法是做一些类似的事情，只为外框的边框设置动画？但是我没有为 box-shadow:inset 制作动画。

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();
});

Answer 1

你可以使用 CSS pointer-events属性:

The CSS property pointer-events allows authors to control under what circumstances (if any) an element can become the target of mouse events.

#pulse {
    pointer-events: none;
    ...
}

DEMO