jquery - 正确使用 jQuery 效果

Question

我正在使用 jQuery 弹跳效果来验证表单条目。当文本字段反弹时，它会失去其 CSS 属性： 原始：

效果期间：

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

以及如何在生效后清除文本框并保留占位符文本？

Answer 1

添加

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

到您的样式表：

http://jsfiddle.net/7rCZW/