jQuery animate () для скрытия и отображения элементов путем перемещения влево и вправо

Question

Я пытаюсь оживить что-то с помощью jQuery.

UPDATE

У меня все работает так, как я хочу. Это 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 входа под ней. На данный момент я разместил их под строкой поиска, но я планирую скрыть их, и когда нажата кнопка «Перейти в чат», поиск сдвигается влево, а 4 входа - вправо.

Прямо сейчас окно поиска сдвигается к центру и не исчезает полностью. Как я могу сделать так, чтобы он функционировал так, как я хочу? Если мое объяснение неясно относительно того, что я ищу, пожалуйста, попросите разъяснения.

Спасибо.

Answer 1

Попробуйте изменить

$('#search').animate({ 
                    width: '0px',
                }, 
                    '1000'
                );

на

$('#search').animate({ width: '0px' }, 1000, function() {
                $(this).hide();
             });

После завершения анимации элемент будет скрыт.

Я также заметил, что «Поиск»текст плохо анимированПеред выполнением анимации попробуйте удалить (или исчезнуть) текст.Не забудьте показать это снова при переключении назад.Например:

$('#search-label').hide();

ИЛИ

$('#search-label').fadeOut();

Answer 2

Я понял это.Чтобы сделать его скользящим влево, я дал соответствующие окружающие <div> sa ширины и margin-left: 0px;.Затем у меня возникла проблема с переносом текста, так как ширина сужалась / расширялась.Чтобы исправить это, я добавил white-space: nowrap; в CSS для соответствующих <div> s.

Вот jQuery:

$(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();
                    }
                );
            }
        );
    });
});

... и CSS:

#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;
}

Если у кого-то есть предложения по поводу того, как я отформатировал jQuery, пожалуйста, дайте мнезнаете, что вы думаете ... вам нравится, как я отформатировал?Я чувствую, что это выглядит немного неловко.

Answer 3

$('#search').animate({width: '0'}, 1000, function(){
    $(this).hide();
});

Страница как бы сходит с ума при переключении ... следите за своими селекторами.