Поисковая палка Apple.com, которая увеличивается при нажатии? - PullRequest
Новая
       1

Поисковая палка Apple.com, которая увеличивается при нажатии?

1 голос
/ 26 февраля 2011

Сможет ли кто-нибудь указать правильное направление, например, для "подобного" плагина jquery, который может воспроизводить новую функциональность поисковой карты Apple?

При использовании Safari или Chrome поисковая панель, расположенная в глобальной навигации Apple, увеличивается при нажатии.Я хотел бы включить этот же эффект для моего проекта.

Ссылка: http://www.apple.com/about/webbadges/

Я ценю вашу помощь!

Эван

Ответы [ 2 ]

6 голосов
/ 26 февраля 2011

Я бы сказал, просто напиши это сам!Это не так сложно, как вы думаете.Это может помочь вам начать: 

<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>
1 голос
/ 26 февраля 2011

анимация списка ссылок также должна быть легкой 

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
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...