jQuery animate（）通过向左和向右滑动来隐藏和显示元素 [英] jQuery animate() to hide and show elements by sliding left and right

问题描述

我正在尝试使用jQuery动画一些东西。

I'm trying to animate something using jQuery.

我按照我想要的方式工作。这是jQuery：

I have it working the way I want it. This is the 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();
                        }
                    );
                }
            );
        });
    });

现在的问题是文本在幻灯片发生时正在包装，而且非常难看。我怎么能这样做，以便文本作为搜索栏和输入字段滑入/滑出，而不会随着宽度变窄/扩展而包装？

The problem now is that the text is wrapping as the slide happens and it is very ugly. How could I make it so that the text slides in/out as the search bar and the input fields without it wrapping as the width narrows/expands?

谢谢。

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

Basically, I want to slide in the search bar to the left, essentially hiding it, and then slide out the 4 inputs below it. For now, I've placed them under the search bar but my plan is to hide them, and when the "Go Chat" button is pressed, the search slides out to the left and the 4 inputs slide in to the right.

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

Right now, the search box slides in to the center and doesn't disappear fully. How can I make it so it functions as I want it? If my explanation is unclear as to what I'm looking for, please ask for clarification.

谢谢。

推荐答案

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

I figured it out. To make it slide to the left, I gave the corresponding surrounding <div>s a width and margin-left: 0px;. Then I had the issue of the text wrapping as the width narrowed/widened. To fix that, I added white-space: nowrap; to the CSS for the corresponding <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的方式有任何建议，请告诉我你的想法...你喜欢我格式化的方式吗？我觉得它看起来有点尴尬。

If anyone has suggestions on the way I formatted the jQuery, please let me know what you think... do you like the way I formatted? I feel like it looks a bit awkward.

这篇关于jQuery animate（）通过向左和向右滑动来隐藏和显示元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！