2

フォームエントリを検証するために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;
}

また、効果の後にテキストボックスをクリアして、プレースホルダーテキストを保持するにはどうすればよいですか？

4

1 に答える 1

1

追加

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

あなたのスタイルシートへ：

http://jsfiddle.net/7rCZW/

于 2013-01-24T00:38:31.033 に答える