JQuery Box-shadow Inset проблема

Question

У меня проблема с JQuery и вставкой Box-Shadow.

Прежде всего, у меня есть поле ввода.

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

Это поле имеет следующие стили 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;
}

Хорошо. Теперь часть JQuery:

Что я хочу сделать! Если я наведу курсор мыши на поле ввода, мне понадобится «внешняя» тень блока. Как: boxShadow: "0px 0px 15px # 750082". Но вставка box-shadow должна быть такой же !!

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

    });
});

Проблема заключается в том, что «внешняя» тень блока будет отображаться в виде вставленной тени блока. Но я хочу "внешнюю" рамку-тень и вставную рамку-тень!

Так что не так с моим решением? Есть кто-то лучше?

С наилучшими пожеланиями

редактировать Я использую JQuery 1.6.2, для boxshadow я использую http://www.bitstorm.org/jquery/shadow-animation/test.html Плагин!

Answer 1

здесь две опции для получения одинакового желаемого результата

пример 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;
}

вы можете написать автору теневого плагина, чтобы уведомить его / ее об этой проблеме.