анимационный jQuery (), чтобы скрыться и показать элементы путем скольжения левый и правый
Я пытаюсь анимировать что-то с помощью jQuery.
ОБНОВЛЕНИЕ
У меня есть он прокладывание себе путь, я хочу это. Это - jQuery:
$(document).ready(function() {
// go chat button
$('#go-chat input').click(function() {
$('#search, #go-chat').animate({width: '0px'}, 1000, function() {
$(this).hide();
$('#login, #go-search').animate({width: '573px'}, 1000, function() {
$(this).show();
}
);
}
);
});
$('#go-search input').click(function() {
$('#login, #go-search').animate({width: '0px'}, 1000, function() {
$(this).hide();
$('#search, #go-chat').animate({width: '573px'}, 1000, function() {
$(this).show();
}
);
}
);
});
});
Проблема теперь состоит в том, что текст переносится, поскольку слайд происходит, и это очень ужасно. Как я мог сделать его так, чтобы текстовые слайды в / как панель поиска и поля ввода без нее переносящийся как ширина сузились/расширили?
Спасибо.
СТАРЫЙ ВОПРОС
В основном я хочу скользить в панели поиска налево, по существу скрывая его, и затем выдвинуть 4 исходных данные ниже его. На данный момент я разместил их под панелью поиска, но мой план состоит в том, чтобы скрыть их, и когда кнопка "Go Chat" нажимается, поиск выскальзывает налево, и 4 исходных данных задвигают направо.
Прямо сейчас поле поиска задвигает к центру и не исчезает полностью. Как я могу сделать его так, это функционирует, поскольку я хочу это? Если мое объяснение неясно относительно того, что я ищу, попросите разъяснение.
Спасибо.
3 ответа
Я разобрался. Чтобы сдвинуть его влево, я присвоил окружающим Вот jQuery: ... и CSS: Если у кого-нибудь есть предложения о том, как я отформатировал jQuery, пожалуйста, дайте мне знать, что вы думаете ... вам нравится, как я отформатировал? Мне кажется, это выглядит немного неловко. margin-left: 0px; . Затем у меня возникла проблема с переносом текста по мере сужения / расширения ширины. Чтобы исправить это, я добавил white-space: nowrap; в CSS для соответствующих $(document).ready(function() {
$('#go-chat input').click(function() {
$('#search, #go-chat').animate(
{
width: '0px'
}, 1000, function() {
$(this).hide();
$('#login, #go-search').animate(
{
width: '573px'
}, 1000, function() {
$(this).show();
}
);
}
);
});
$('#go-search input').click(function() {
$('#login, #go-search').animate(
{
width: '0px'
}, 1000, function() {
$(this).hide();
$('#search, #go-chat').animate(
{
width: '573px'
}, 1000, function() {
$(this).show();
}
);
}
);
});
});
#search {
border: 1px solid #999999;
-moz-border-radius: 5px;
width: 573px;
height: 40px;
margin: auto;
margin-top: 100px;
margin-left: 0px;
position: relative;
}
#go-chat {
width: 575px;
margin: auto;
margin-top: 36px;
margin-left: 0px;
padding-top: 5px;
white-space: nowrap;
}
#login {
border: 0px;
width: 0px;
display: none;
margin: auto;
margin-top: 100px;
margin-left: 0px;
position: relative;
}
#go-search {
width: 0px;
margin: auto;
margin-top: 36px;
margin-left: 0px;
padding-top: 5px;
white-space: nowrap;
display: none;
}
Попробуйте изменить
$('#search').animate({
width: '0px',
},
'1000'
);
на
$('#search').animate({ width: '0px' }, 1000, function() {
$(this).hide();
});
По завершении анимации элемент будет скрыт.
Я также заметил, что текст «Поиск» плохо анимирован. Перед тем, как делать анимацию, попробуйте удалить (или затемнить) текст. Не забудьте показать это снова при переключении назад. Например:
$('#search-label').hide();
ИЛИ
$('#search-label').fadeOut();
$('#search').animate({width: '0'}, 1000, function(){
$(this).hide();
});
Страница как бы сбивается при переключении... следите за своими селекторами.