Javascript jQuery animate（）通过左右滑动隐藏和显示元素

我正在尝试使用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();
                        }
                    );
                }
            );
        });
    });

$(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').animate({width: '0'}, 1000, function(){
    $(this).hide();
});

老问题 基本上，我想在搜索栏中向左滑动，基本上隐藏它，然后滑出它下面的4个输入。现在，我已经将它们放在搜索栏下，但我的计划是隐藏它们，当按下“Go Chat”按钮时，搜索滑出到左侧，4个输入滑入到右侧

现在，搜索框滑入中心，并没有完全消失。我怎样才能使它按我的要求运行？如果我的解释不清楚我在寻找什么，请要求澄清

谢谢

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

页面在切换时有点不正常…请注意选择器。

尝试更改

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

到

动画完成后，元素将隐藏

我还注意到“搜索”文本的动画效果不好。 在制作动画之前，请尝试删除（或淡出）文本。记得在切换回时再次显示它。例如：

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

或

---

我想出来了。为了让它向左滑动，我给了相应的

s一个宽度和

左边距：0px。然后，当宽度变窄/变宽时，我遇到了文本换行的问题。为了解决这个问题，我添加了
空白：nowrap到对应的
s的CSS

以下是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();
                        }
                    );
                }
            );
        });
    });

$(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的方式有任何建议，请告诉我您的想法。。。你喜欢我格式化的方式吗？我觉得这看起来有点尴尬。
谢谢。现在，我该如何处理幻灯片效果。。。我想让它滑到左边，而不是像现在这样滑到中间？是的，我让它工作了。我将在修复一些次要的视觉细节后发布我的解决方案。谢谢。现在，我该如何处理幻灯片效果。。。我想让它向左滑动，而不是像当前那样滑动到中心？可能您想同时将位置或边距设置为宽度：0动画。设置动画（{width:'0'，left:'150px'}）；差不多吧。