CODEWITHSUNDEEP
jquerycssjquery-ui
Himanshu Yadav
Himanshu Yadav

Reputation: 13585

Using jQuery Effects properly

I am using jQuery bounce effect to validate a form entry. When text field bounces it looses its CSS properties: Original: enter image description here

During effects: enter image description here

HTML:

<span class='notify'>
        <span class='getin'>Get in early</span>
        <input type='text' id='inviteEmail' placeholder='Enter email'/>
        <a href='#' name='email' id='invite-all' onclick='notifyEmail();' class='btn'>Notify Me</a>
      </span>

CSS:

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

And how would I clear the text box after effect and retain the placeholder text?

Upvotes: 2

Views: 234

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191749

Add 

.notify .ui-effects-wrapper {
  display: inline-block;   
}

To your stylesheet:

http://jsfiddle.net/7rCZW/

Upvotes: 1

Related Questions