代码之家 › 专栏 › 技术社区 › Hristo

jquery animate()通过左右滑动隐藏和显示元素

slide jquery-animate jquery javascript

Hristo · 技术社区 · 15 年前

我正在尝试使用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个输入将向右滑动。

现在,搜索框滑到中间,不会完全消失。我怎样才能让它发挥我想要的功能呢?如果我的解释不清楚我在找什么,请要求澄清。

谢谢。

3 回复 | 直到 11 年前

g t Omri Btian 15 年前

尝试改变

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

到

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

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

我还注意到“搜索”文本的动画效果不佳。在进行动画制作之前,请尝试删除(或淡出)文本。记得在切换回时再次显示。如:

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

或

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

Hristo 15 年前

我知道了。为了让它向左滑动,我给了它相应的周围环境 <div> S的宽度和 margin-left: 0px; . 然后,随着宽度的缩小/加宽,出现了文本换行的问题。为了解决这个问题,我补充道 white-space: nowrap; 到相应的CSS <DIV & GT; 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的方式有任何建议,请告诉我您的想法…你喜欢我格式化的方式吗?我觉得有点尴尬。

Squirkle 15 年前

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

页面在切换时有点奇怪…注意选择器。