0

私は現在、プロジェクトに取り組んでおり、TwitterBootstrapとjQueryを使用してトップナビゲーションバーを設計しています。ユーザーが検索クエリを実行するために使用できる検索バーがあります。以下に示すように、「プレースホルダー」の値は「Car」です。jQueryで「プレースホルダー」の値を変更したい。jQueryは配列からランダムな値（文字列）を選択する必要があり、テキストがx秒の間で変化する間、スムーズな遷移（フェードインとフェードアウト）が必要です。

<div class="span4">
    <form class="navbar-search input-append">
        <input id="appendedInputButton" type="text" class="input-xlarge" placeholder="Cars">
        <button class="btn" type="button"><i class="icon-search"></i></button>
    </form>
</div>
4

2 に答える 2

1

これにより、プレースホルダーが1秒ごとに置き換えられます。

$(function() {

   var fonts = ['Times New Roman', 'Arial', 'Tahoma'];
   var time = setInterval(function() {
       var newFont = fonts[Math.floor(Math.random()*fonts.length)];
       $('#appendedInputButton').attr('placeholder', newFont);
   },1000);

});

jsFiddleはこちら。フェードに関しては、必要な機能を再現できない場合があります。jQueryは、フェードアウトを達成するために、またはを介してフェードアウトを提供しますfadeOut()がanimate()、それらはDOM要素自体とそのCSSプロパティの1つにのみ影響し、属性には影響しません。

于 2013-01-27T12:25:04.310 に答える
0

@hohnerはここで大変な仕事をしたようです！たぶん、CSSトランジションを使用してフェードを処理することは可能です。クロスブラウザの問題があることは知っていますが、それは始まりです。

これは、2番目のフォントのテキストの色が変わる概念実証を備えた彼の作品のフォークです。http://jsfiddle.net/panchroma/qpUN6/

私にとって、これはMacChromeとSafariで機能しています。すべてのフォント変更で機能するようにするには、2つの既知の値の間でマーカークラスを循環させる必要があります。Javascriptは私の強みではありませんが、他の誰かがこれを別のステップに進めることができると確信しています;）

CSSセレクターはこんな感じ

#appendedInputButton.marker::-webkit-input-placeholder {
color: blue;
}
#appendedInputButton.marker:-moz-placeholder {
color: blue;
}

このソースからプレースホルダーテキストを選択する際にこのヘルプを取得しました

トランジションは標準です 

#appendedInputButton::-webkit-input-placeholder{
transition: all 2s;
-webkit-transition: all 2s; /* Safari and Chrome */
}

何が起こっているかを確認できるように、2秒に減速しました。CSSトランジションはFirefoxでは機能しません。理由はわかりません。

幸運を

于 2013-01-27T15:28:35.050 に答える