JQueryボックスシャドーインセットの問題

Question

JQueryとインセットボックスシャドウに問題があります。

まず入力フィールドがあります。

#contact input[type="text"] { 
    background: rgba(55,55,55, 0.6); 
    height:2em; 
    border: 1px dashed #666; 
    width:200px; 
    box-shadow:inset 0px 0px 10px #222; 
    border-radius: 2px; 
} 

オーケー：フィールドには、以下のCSSスタイルを持っていることを

<input id="name" name="name" type="text" /> 

。今すぐJQueryの部分：

私がしたいこと！入力フィールドの上にカーソルを置くと、外側のボックスシャドウが必要になります。 Like：boxShadow： "0px 0px 15px＃750082"しかし、差し込みボックスの影は同じでなければなりません!!

$(document).ready(function(){ 
    $("#message").hover(
     function() 
      {$(this).stop().animate({boxShadow: "0px 0px 15px #750082"},800); 
      }, 
     function() 
      {$(this).stop().animate({boxShadow: "inset 0px 0px 10px #222222"}); 

    }); 
}); 

問題は、「外側」のボックスシャドウが挿入シャドウとして表示されることです。 しかし、私は "外側の"ボックスシャドウとインセットボックスシャドウが必要です！

私の解決策は何ですか？誰か良い人がいますか？

敬具

編集 私はboxshadowのために、私はhttp://www.bitstorm.org/jquery/shadow-animation/test.htmlプラグインを使用しています、jQueryの1.6.2を使用しています！ここ

Answer 1

は

example jsfiddle

1と同じ望ましい結果を得るためにオプションがあります<input>

<span id="nameWrapper"> 
    <input id="name" name="name" type="text" value="" /> 
</span> 

のラッパーを使用してjQueryの：

$("#name").hover(function() { 
    $(this).parent().stop().animate({ 
     boxShadow: "0px 0px 15px #750082" 
    }, 800); 
}, function() { 
    $(this).parent().stop().animate({ 
     boxShadow: "" 
    }, 800); 
}); 

2：使用CSS3ではなく

CSS移行：

#contact input[type="text"] { 
    background: rgba(55,55,55, 0.6); 
    height:2em; 
    border: 1px dashed #666; 
    width:200px; 
    box-shadow:inset 0px 0px 10px #222; 
    border-radius: 2px; 
    outline:0;/* prevent webkit highlight on focus */ 
    -webkit-transition: all 0.8s ease-in-out; 
     -moz-transition: all 0.8s ease-in-out; 
     -ms-transition: all 0.8s ease-in-out; 
     -o-transition: all 0.8s ease-in-out; 
      transition: all 0.8s ease-in-out; 
} 
#contact input[type="text"]:hover { 
    /* set both shadows */ 
    box-shadow:inset 0px 0px 10px #222,0px 0px 15px #750082; 
} 

を、あなたがこの問題の彼/彼女を通知するプラグイン影の作者を書き検討することができます。