.animate ({width: 'toggle'}) без искажения содержимого

Так что я'У меня проблемы с моим левым скользящим дивом. В настоящее время я 'м использую$('#searchBox').animate({ width: 'toggle' }); чтобы показать это, но пока он скользит, похоже, что содержимое внутри него игнорируется. Они исправляются после того, как div перестает скользить, но этостранный эффект, пока он скользит. Коды ям с помощью:

// Search bar dropdown script

    function searchBar() {
        $('#searchBox').animate({ width: 'toggle' });
        $('#searchBoxButton').fadeToggle('fast');
    }

    function searchBarClose() {
        $('#searchBox').animate({ width: 'toggle' });
        $('#searchBoxButton').fadeToggle('fast');
    }


    
        
        
        
    

    #searchBoxButton {
    width: 50px;
    height: 50px;
    background-color: #000;
    right: 0;
    position: absolute;
    margin: -5px auto 0 auto;
}

#searchBox {
    display: none;
    right: 0;
    position: fixed;
    margin: -5px auto 0 auto;
    background-color: #202020;
    z-index: 1;
    padding: 3px 0;
    border: 1px solid #151515;
}

#searchBox input[type="text"] {
    width: 150px;
    outline: none;
    padding: 3px 2px;
    background-color: #3F3F3F;
    border: 1px solid #4d4d4d;
    border-radius: 3px;
    font-family: "Trebuchet MS" sans-serif;
    color: #c0c0c0;
    float:left;
}

#searchBox input[type="text"]:focus {
    border: 1px solid #797979;
    box-shadow: 0px 0px 15px -2px #797979;
    background-color: #444444;
}

#searchBoxInput::-webkit-input-placeholder { /* WebKit browsers */
    color:    #7d7d7d;
}
#searchBoxInput:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #7d7d7d;
}
#searchBoxInput::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #7d7d7d;
}
#searchBoxInput:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #7d7d7d;
}

#magnifier {
    background: url("http://placehold.it/13x13") no-repeat;
    width: 13px; height: 13px;
    float: left;
    margin: 7px 6px;
}

.closeButton {
    border-radius: 15px;
    cursor: pointer;
    background: url("http://placehold.it/15x15") center no-repeat;
    width: 15px; height: 15px;
    float: left;
    -webkit-transition: background 200ms ease-in-out;
    -moz-transition: background 200ms ease-in-out;
    -o-transition: background 200ms ease-in-out;
    transition: background 200ms ease-in-out;
}

#searchBox .closeButton {
    margin: 7px 4px;
    float: left;
}

.closeButton:hover {
    background-color: #373737;
    -webkit-transition: background 200ms ease-in-out;
    -moz-transition: background 200ms ease-in-out;
    -o-transition: background 200ms ease-in-out;
    transition: background 200ms ease-in-out;
}

.closeButton:active {
    background-color: #212121;
}

Я знаю, что для решения этой проблемы можно использовать абсолютные позиции,#magnifier#searchBoxInput а также.closeButtonно это неэто будет хорошо для меня. Есть ли другой способ сделать это?

Скрипки:http://tinker.io/ef4f7

Ответы на вопрос(2)

Решение Вопроса

чтобы показать элементы, плавающие в одной строке. Не хватает ширины, чтобы показать их. Вместо этого вы можете переключать правильную позицию.

демонстрация
 function searchBar() {
        $('#searchBox').animate({ right: 'toggle' });
        $('#searchBoxButton').fadeToggle('fast');
    }

    function searchBarClose() {
        $('#searchBox').animate({ right: 'toggle' });
        $('#searchBoxButton').fadeToggle('fast');
    }

С эффектом слайда

демонстрация
function searchBar() {
      $('#searchBox').show('slide', {
          direction: 'right'
      }, 2000);
      $('#searchBoxButton').fadeToggle('slow');
  }

  function searchBarClose() {
      $('#searchBox').hide('slide', {
          direction: 'right'
      }, 2000, function () {
          $('#searchBoxButton').fadeToggle('slow');
      });

  }
 PSL20 мая 2013 г., 06:00
Да, вы можете иметь эффект слайда с помощью эффектов jquery ui.
 Gus20 мая 2013 г., 05:22
Isn»Есть ли способ заставить его скользить, как старый? Таким образом, кажется, что это выглядит безрезультатно Спасибо за ответ, хотя.
 Gus20 мая 2013 г., 06:30
Это работает как шарм! Спасибо за ваше время!
 origin1tech20 мая 2013 г., 05:42
@ Гусь, посмотри мой ответ ниже с рабочим jsfiddle. Я думаю, это то, что вы хотите.

работающий так, как вы хотите, используя width вместо right. Обратите внимание, что я изменил некоторые ваши CSS и исключил саму кнопку поиска, как я не делалу меня нет доступа к этому изображению. Но вкратце вот основное исправление:

function searchBar() {
        $('input').fadeIn('fast', function () {
          $('#searchBox').animate({ width: 'toggle' });
      });

}

Убедитесь, что вам нужна ширина этого поля ввода, чтобы вы неУ меня нет проблем с размерами. выше должно работать, а вотjsfiddle

ПРИМЕЧАНИЕ: там есть дополнительный якорь, чтобы снова продемонстрировать, как я не делалУ меня нет доступа к вашей кнопке лупы, но вы должны понять. Дайте мне знать, если он не работает как вымне нравится

 Gus20 мая 2013 г., 05:58
Спасибо за Ваш ответ! Я использовал изображения заполнителя на скрипке, но забыл обновить его в коде, уже отредактировал пост. Таким образом, основная идея будет скрывать input, magnifier и closeButton и отображать их при вызове функции searchBar ()? Я'У меня возникли проблемы с адаптацией, но я думаю, что понял основную идею.
 Gus20 мая 2013 г., 06:07
tinker.io/ef4f7 у этого есть изображения заполнителя, должно работать просто отлично. кнопка searchBoxButton должна быть черной плиткой.
 Gus20 мая 2013 г., 06:31
Неважно, PSL 'Ответ s решил мою проблему. Я действительно ценю ваше время, чтобы помочь мне, хотя. Спасибо!
 origin1tech20 мая 2013 г., 06:05
@ Гас, если правильно, отметьте как правильный. если вам нужна дополнительная помощь, обновите скрипку с правильными ссылками, и яЯ исправлю это для тебя.

Ваш ответ на вопрос