jQuery的動畫boxshadow

Question

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

下面，我達到我想要的效果，但有一個未決問題。因爲我正在使用一個單獨的跨度，並將它絕對地放置在一個相對位置的盒子的頂部。直到動畫完成後，我才能訪問輸入。我猜想緩解這種情況的唯一方法就是將外框的邊框動畫化。但我沒有做什麼動畫框陰影：插入工作。

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：

CSS屬性指針事件允許作者在什麼情況下控制（如果有的話）的元素可以成爲鼠標事件的目標。

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

DEMO

Answer 2

我只是修改了Z-指數#pulse，所以它會在下面的輸入您的分層。

#pulse { 
    ... 
    z-index: -20000; 
}