正确使用jQuery Effects

时间:2013-01-24 00:30:57

标签: jquery css jquery-ui

我正在使用jQuery跳出效果来验证表单条目。当文本字段反弹时,它会丢失其CSS属性: 原版的: enter image description here

在效果期间: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;
}

如何在效果后清除文本框并保留占位符文本?

1 个答案:

答案 0 :(得分:1)

添加

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

到样式表:

http://jsfiddle.net/7rCZW/