Problème d'insertion de l'ombre d'une boîte JQuery

Question

J'ai un problème avec JQuery et l'insertion de Box-Shadow.

Tout d'abord, j'ai un champ de saisie.

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

Ce champ a les styles css suivants :

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

Ok. Maintenant la partie JQuery :

Ce que je veux faire ! Si je passe la souris sur mon champ de saisie, je veux un box-shadow "extérieur". Comme : boxShadow : "0px 0px 15px #750082". Mais le box-shadow intérieur doit être le même !

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

    });
});

Le problème est que l'ombre de la boîte "extérieure" sera affichée comme une ombre de boîte insérée. Mais je veux un box-shadow "externe" et un box-shadow inséré !

Alors, qu'est-ce qui ne va pas avec ma solution ? Quelqu'un en a une meilleure ?

Meilleures salutations

editar J'utilise JQuery 1.6.2, pour le boxshadow j'utilise http://www.bitstorm.org/jquery/shadow-animation/test.html Plugin !

Answer 1

Voici deux options pour obtenir le même résultat souhaité

exemple jsfiddle

1 : Utiliser un wrapper pour le <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 : Utilisez plutôt des transitions 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;
}

vous pouvez envisager d'écrire à l'auteur du plugin shadow pour lui signaler ce problème.