Using jQuery Effects properly

dano

New Member
I am using jQuery bounce effect to validate a form entry. When text field bounces it looses its CSS properties:Original:
c7ApE.png
During effects:
aarcl.png
HTML:\[code\]<span class='notify'> <span class='getin'>Get in early</span> <input type='text' id='inviteEmail' placeholder='Enter email'/> <a href='http://stackoverflow.com/questions/14491922/#' name='email' id='invite-all' onclick='notifyEmail();' class='btn'>Notify Me</a> </span>\[/code\]CSS:\[code\].notify { position: absolute; bottom: 0; padding-left: 50px;}a.btn { padding: 6px 7px; background: #000000; color: #3be2da !important; border: 2px solid rgba(33, 68, 72, 0.59); border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; text-align: center; text-decoration: none; font: bold 14px; margin-left: 10px;}a.btn:hover { background: #3d7a80;}span.getin { font: bold 16px Tahoma; margin-right: 35px;}input[type='text']{ text-align:center; font-weight: bold; width: 220px; height: 35px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: 2px solid #616565; font-size: 18px;}a.invitelink { padding: 6px 7px; background: #000000; color: #3be2da !important; border: 2px solid rgba(33, 68, 72, 0.59); border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; text-align: center; text-decoration: none; font: bold 14px Tahoma,Helvetica, Geneva, sans-serif; margin-left: 10px;}\[/code\]And how would I clear the text box after effect and retain the placeholder text?
 
Back
Top