誰かがリンゴの新しい検索スティック機能を複製する可能性のある「類似の」jqueryプラグインを正しい方向に向けることができますか？Apple.comの検索スティックはクリックすると拡大しますか？
SafariまたはChromeを使用している場合、クリックするとリンゴのグローバルナビゲーションにある検索スティックのサイズが大きくなります。私はこの同じ効果を私のプロジェクトに取り入れたいと思っています。
リンク：http://www.apple.com/about/webbadges/
私はあなたの助けに感謝！
エバン
あなたが思うほど難しくありません。これは、あなたが始めるのに役立つかもしれない：
<html><body>
<style>
#search {
background-color: #999;
width: 100px;
border: 1px solid #ddd;
outline: none;
}
</style>
<input id="search" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>
<script>
jQuery(function() {
jQuery('#search').focus(function() {
jQuery(this).animate({ width: '200px', backgroundColor: '#fff' });
}).blur(function() {
jQuery(this).animate({ width: '100px', backgroundColor: '#999' });
});
});
</script>
</body></html>
@マーク - これは素晴らしいです！そこで、コードとコードを使ってデモを作成しました：http://jsbin.com/aruja3/背景を 'searchbga.gif'で囲むにはどうしたらいいですか？ 'searchleftcap.gif'フィールドもフィールドでアニメーション化されますか？ – Evan
申し訳ありませんが、今日は非常に忙しいです。私は明日それを見なければならないでしょう。 –
@マーク - ありがとう。私はこの新しいリンクの中でそれに全力を尽くして、私はもっと近くに見えますが、完璧ではありません。私はあなたの助けに感謝します！ありがとうございました。 http://jsbin.com/aruja3/2/ – Evan
リンクのリストをアニメーション化することも
ul#menu {
display: table;
width: 500px;
}
ul#menu li {
display: table-cell;
}
<ul id=menu>
<li>link1</li>
<li>link2</li>
<li>link3</li>
</ul>
$('#menu').animate({width:'-=100'},1000); //make them slimmer
$('#menu').animate({width:'+=100'},1000); //make them fatter
「サファリやChrome」など簡単なはずのプラグインを頼むなぜそれが – generalhenry
WebKitのアニメーションを使っている意味？これはプログラミングのQ＆Aサイトなので、おそらくあなたはプログラマーで快適なコードを書いているだけでなく、他人のプラグインだけでなく、これを簡単に実装するのは簡単です... animate（）を使用して、幅を広げ、クリック時の背景色を変更します。 jQueryの1行。 –