.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