使用jQuery的animate()函数实现左右滑动隐藏和显示元素

Question

我正在尝试使用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个输入框。目前，我已经将它们放在了搜索栏下面，但我的计划是将它们隐藏起来，当“进入聊天”按钮被按下时，搜索栏向左滑出，4个输入框向右滑入。

现在，搜索框滑入到中心并没有完全消失。如何让它按照我的要求正常工作？如果我的解释不清楚，请询问澄清。

谢谢。

- Hristo

Answer 1

尝试更改

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

to

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

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

我还注意到“搜索”文本没有很好地进行动画处理。在执行动画之前，请尝试移除（或渐隐）该文本。切记在切换回来时再次显示它。例如：

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

OR

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

- g t

---

谢谢。现在，我该如何处理幻灯片效果...我希望它向左滑动，而不是像目前这样滑到中心？ - Hristo

是的，我已经解决了。在修复一些小的视觉细节之后，我会发布我的解决方案。 - Hristo

Answer 2

我已经想通了。为了让它向左滑动，我给相应的周围

设置了宽度和margin-left: 0px;。然后我遇到了文本在宽度变窄/变宽时换行的问题。为了解决这个问题，我在相应

的CSS中添加了white-space: nowrap;。

这是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的方式有建议，请让我知道你的想法...你喜欢我的格式化方式吗？我觉得它看起来有点别扭。

- Hristo

Answer 3

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

在切换时，页面有点混乱...请注意你的选择器。

- Squirkle

---

谢谢。现在，我该如何处理幻灯片效果...我希望它向左滑动，而不是像目前这样滑到中心？ - Hristo

可能你想同时动画化位置或者边距，以至于和宽度动画化一起。.animate({width: '0', left:'150px'}); 就是这样。 - Squirkle