0

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

</ p>

4

2 に答える 2

1

pointer-eventsCSSプロパティを使用できます。

CSSプロパティのpointer-eventsを使用すると、作成者は、どのような状況（存在する場合）で要素をマウスイベントのターゲットにすることができるかを制御できます。

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

デモ

于 2012-07-06T21:10:54.880 に答える
0

#pulseのz-indexを変更しただけなので、入力の下にレイヤー化されます。

#pulse {
    ...
    z-index: -20000;
}
于 2012-07-06T21:22:55.280 に答える