Поле поиска jQuery fadeIn / Out

0

Штаб-квартира,

Я ищу, чтобы кнопка поиска "трансформировалась" в поле поиска.

Это то, что у меня есть до сих пор, но анимация супернадежна.

HTML

<div id='search'>
    <span id='text'>Search</span><span id='field' style="display:none;"><input type="text" name="firstname"></input></span><a href='#' id='btn_go'>Go</a>
</div>

CSS

*{
    margin: 0px;
    padding:0px;
}

#search span {
    padding: 15px;
    display: block;
    float: left;
}
#search {
    background-color: #09F;
    overflow: hidden;
    float: left;
}
#btn_go  {
    background-color: #06C;
    padding: 15px;
    display: block;
    float: left;
    color: #FFF;
    text-decoration: none;
    }

JS

$( "#btn_go" ).click(function() {
  $( "#text" ).fadeToggle( "slow", function() {
    // Animation complete.
  });

      $( "#field" ).fadeToggle( "slow", function() {
    // Animation complete.
  });

});

Сценарий: http://jsfiddle.net/75DUC/

Теги:

2 ответа

0

Абсолютное позиционирование решит вашу проблему. Вам нужно будет играть с значениями ширины и высоты, но вот приблизительное приближение того, что вы ищете: Fiddle

Обновлен CSS:

*{
    margin: 0px;
    padding:0px;
}

#search span {
    padding: 15px;
    display: block;
    position: absolute;
}
#search {
    background-color: #09F;
    overflow: hidden;
    height: 50px;
    width:250px;
    position:relative;
}
#text{
    top:0;
    left:0;
    width: 150px;
}
#field{
    top:0;
    left:0;
}
#btn_go  {
    background-color: #06C;
    padding: 15px;
    display: block;
    position: absolute;
    top:0;
    right:0;
    color: #FFF;
    text-decoration: none;
    }

ОБНОВИТЬ:

Я обновил свою скрипту, чтобы включить расширяющееся окно поиска. Я использовал переходы CSS и немного дополнительного jQuery, чтобы заставить его работать.

Дополнительный jQuery:

  var search = $('#search')
  var width = search.width();
  if(width == 125){
      search.width('250px');
  }
  else{
      search.width('125px');
  }

Дополнительные CSS:

#search {
    transition: width 0.5s linear;
}
  • 0
    Я действительно хотел, чтобы поле поиска «росло», расширяя контейнер справа налево.
  • 0
    @AaronBenjamin Я отредактировал свой ответ, чтобы включить это.
0

Для достижения перекрестного затухания (перекрытие полей с текстом) установите #text в position: absolute.

http://jsfiddle.net/75DUC/1/

Ещё вопросы

Сообщество Overcoder
Наверх
Меню