jQuery Box-shadow 插入问题

Question

我对 JQuery 和 inset 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，对于我正在使用 http://www.bitstorm.org/jquery/shadow-animation/test.html 插件的 boxshadow！

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

你可以考虑给影子插件的作者写信通知他/她这个问题。