jQuery Animation mit Box-shadow

[Xym]

Guten Abend,

ich versuche die ganze zeit eine Animation zu schaffen, wo der box-shadow langsam verschwindet.

Soweit bin ich

<form action="gaestebuch.php" method="post">
            	<table border="2" bordercolor="#000000" width="570px" align="center">
                <tbody>
                	<tr>
                    	<th align="left" width="80px"> Vorname: </th>
                        <td> <input name="vorname" type="text" size="30" maxlength="30"> </td>
                    </tr>
                    
                    <tr>
                    	<th align="left"> Nachname: </th>
                        <td> <input name="nachname" type="text" size="30" maxlength="30"> </td>
                    </tr>
                    
                    <tr>
                    	<th align="left"> E-Mail: </th>
                        <td> <input name="email" type="text" size="30" maxlength="50"> </td>
                    </tr>
                    
                    <tr>
                    	<th align="left" valign="top"> Text: </th>
                        <td> <textarea name="text" id="text" cols="28" rows="5" onKeyUp="check()"> </textarea> </td>
                    </tr>
                    
                    <tr>
                    	<th> </th>
                        <td> <input name="submit" id="button" type="submit" value="Abschicken"> </td>
                    </tr>
                 </tbody>
                 </table>
            </form>

input {
	border: 1px solid #666;
	border-radius: 5px;	
	height: 20px;
}

textarea {
	border: 1px solid #666;
	border-radius: 5px;
	font-size: 12px;
	width:222px;
}

input:focus,textarea:focus {
	box-shadow: 0px 0px 1px 2px #6FF;
}

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>

$("input").focus(function () {
	$(this).animate({
		boxShadow: '0 0 0 #FFF'
	}, 500 );
});

Aber wir ihr euch denken könnt läuft es nicht wie gewollt.

Will das der Box-shadow beim focus kurz aufleuchtet und dann wieder verschwindet.
Habt ihr da eine Idee?

 

[Sebastian Schmidt]

Ich würde $(this).css setzen und dann animate ausführen, ausserdem vor dem letztem ; einfach statt dem focus event auf dem blur event die css optionen wieder entfernen.
In etwa so:

$("input").focus(function () {
    $(this).css('boxShadow', '0 0 0 #FFF');
    $(this).animate();
}).blur(function(){
    $(this).css('boxShadow', '');
    $(this).animate();
});

Habe es nicht ausprobiert aber das sollte gehen.

 

[Xym]

Funktioniert leider nicht..

 

[CPoly]

All animated properties should be animated to a single numeric value

http://api.jquery.com/animate/


jQuery kann keine zusammengesetzten Werte animieren. Und Farben ebenfalls nicht.

Hier ist ein Plugin verlinkt: http://stackoverflow.com/questions/4133366/correct-way-to-animate-box-shadow-with-jquery

Oder auch hier http://www.bitstorm.org/jquery/shadow-animation/