更新

我按照我想要的方式工作。这是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个输入向右滑动。

现在，搜索框滑入中心并且不会完全消失。我怎样才能让它像我想要的那样发挥作用？如果我的解释不清楚我在寻找什么，请要求澄清。

感谢。

Answer 1

尝试更改

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

到

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

动画完成后，元素将被隐藏。

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

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

OR

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

Answer 2

我明白了。为了让它向左滑动，我给了相应的周围<div>宽度和margin-left: 0px;。然后，当宽度变窄/变宽时，我遇到了文本换行的问题。为了解决这个问题，我将white-space: nowrap;添加到相应<div>的CSS中。

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

页面有点怪异切换...请注意你的选择器。

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

更新

旧问题

3 个答案: