0

誰かが検索フィールドに何かを入力するたびに、「Enter」を押すと、入力ボックス内に単純な小さな読み込み gif が表示されるという単純な効果を作成しようとしています。

ここで私のコードを見ることができます: http://jsfiddle.net/9KEKa/1/、ここに生の HTML、CSS、および JS があります:

HTML

<form>
    <input type="text" placeholder="Search..." class="transition-width" />
    <input type="submit" value="Search" class="hide" />
</form>

CSS

/* General */
.hide {
    display: none;
    visibility: hidden;
}

.transition-width {
    -webkit-transition: width 0.5s ease;  
    -moz-transition: width 0.5s ease;  
    -o-transition: width 0.5s ease;  
    -ms-transition: width 0.5s ease;  
    transition: width 0.5s ease;  
}

/* Search Form */
form input { 
    background: url('http://i.imgur.com/7BKx4xr.png') no-repeat right;
    border: none;
    cursor: pointer;
    float: right;
    margin-right: 100px;
    width: 61px;
}

.searching { background: url('http://i.imgur.com/ayJ7sYg.gif') no-repeat right; } 

form input::-webkit-input-placeholder { color: #fff; }

form input::-moz-input-placeholder { color: #fff; }

form input:-moz-input-placeholder { color: #fff; }

form input:-ms-input-placeholder { color: #fff; }

form input:focus { 
    background: #efefef;
    border: 1px solid #aaa;
    cursor: auto;
    width: 200px; 
}

form input:focus::-webkit-input-placeholder { color: #666; }

form input:focus::-moz-input-placeholder { color: #666; }

form input:focus:-moz-input-placeholder { color: #666; }

form input:focus:-ms-input-placeholder { color: #666; }

JavaScript (jQuery)

$(function () {
    $('.search form').on('submit', function (e) {
        e.preventDefault

        $('.search form input.transition-width').addClass('searching');
    });
});

私がやろうとしているのは、背景として必要なアニメーション gif を含む "searching" クラスを追加することだけです。

私のコードの多くは正しいように見えますが、メンタル ブロックがあるだけかもしれません。うまくいけば、それは解決できる簡単な問題です。

4

3 に答える 3

0

e.preventDefault();の代わりに試してくださいe.preventDefault。

また、.search formソースコードが問題のフォームの前にそのようなクラス要素を持たない場合、セレクターは .. であってはなりません。その場合だけのはずformです。

jsフィドル

于 2013-10-31T23:14:11.777 に答える