Guten Abend,

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

Soweit bin ich

HTML-Code:

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

Code css:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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

Code javascript:

1 2 3 4 5 6 7 8

<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?

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:

Code :

1 2 3 4 5 6 7

$("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.

Funktioniert leider nicht..

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/4...ow-with-jquery

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