Javascript jQuery animate() 通过左右滑动来隐藏和显示元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3282047/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery animate() to hide and show elements by sliding left and right
提问by Hristo
I'm trying to animate something using jQuery.
我正在尝试使用 jQuery 为某些内容设置动画。
UPDATE
更新
I have it working the way I want it. This is the 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();
}
);
}
);
});
});
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?
现在的问题是文本在幻灯片发生时自动换行，而且非常难看。我怎样才能让文本滑入/滑出作为搜索栏和输入字段，而不会随着宽度变窄/扩展而环绕？
Thanks.
谢谢。
OLD QUESTION
老问题
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.
基本上，我想在搜索栏中向左滑动，基本上隐藏它，然后滑出它下面的 4 个输入。现在，我将它们放在搜索栏下，但我的计划是隐藏它们，当按下“Go Chat”按钮时，搜索向左滑出，4 个输入向右滑入。
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.
现在，搜索框滑入中心并没有完全消失。我怎样才能让它像我想要的那样运行？如果我的解释不清楚我在寻找什么，请要求澄清。
Thanks.
谢谢。
采纳答案by Hristo
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.
我想到了。为了让它向左滑动，我给了相应的周围<div>sa 宽度和margin-left: 0px;. 然后我遇到了文本换行的问题，因为宽度变窄/变宽。为了解决这个问题，我white-space: nowrap;为相应的<div>s添加了 CSS 。
Here's the jQuery:
这是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();
}
);
}
);
});
});
... and the CSS:
...和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;
}
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 的方式有任何建议，请告诉我您的想法……您喜欢我的格式化方式吗？我觉得看起来有点别扭。
回答by g t
Try changing
尝试改变
$('#search').animate({
width: '0px',
},
'1000'
);
to
到
$('#search').animate({ width: '0px' }, 1000, function() {
$(this).hide();
});
Once the animation is complete, the element will be hidden.
动画完成后，元素将被隐藏。
I also noticed that the 'Search' text isn't animated well. Before doing the animate, try removing (or fading out) the text. Remember to show it again when toggling back. Eg:
我还注意到“搜索”文本的动画效果不佳。在做动画之前，尝试删除（或淡出）文本。记得在切换回来时再次显示它。例如：
$('#search-label').hide();
OR
或者
$('#search-label').fadeOut();
回答by Squirkle
$('#search').animate({width: '0'}, 1000, function(){
$(this).hide();
});
The page kind of freaks out on toggle...mind your selectors.
页面在切换时有点吓人……请注意您的选择器。
