jQuery animate（）通过向左和向右滑动来隐藏和显示元素
我正在尝试使用jQuery动画一些东西。
UPDATE
我按照我想要的方式工作。 这是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个输入滑入右侧。
现在，搜索框滑入中心并且不会完全消失。 我怎样才能使它像我想要的那样发挥作用？ 如果我的解释不清楚我在寻找什么，请要求澄清。
谢谢。
尝试改变
$('#search').animate({ width: '0px', }, '1000' );
至
$('#search').animate({ width: '0px' }, 1000, function() { $(this).hide(); });
动画完成后，元素将被隐藏。
我还注意到“搜索”文本没有很好的动画效果。 在执行动画之前，请尝试删除（或淡出）文本。 切记时切记再次显示。 例如：
$('#search-label').hide();
要么
$('#search-label').fadeOut();
我想到了。 为了让它向左滑动，我给出了相应的周围
sa宽度和margin-left: 0px; 。 然后，当宽度变窄/变宽时，我遇到了文本环绕的问题。 为了解决这个问题，我添加了white-space: nowrap; 到相应的
的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的方式有任何建议，请告诉我你的想法…你喜欢我格式化的方式吗？ 我觉得它看起来有点尴尬。
$('#search').animate({width: '0'}, 1000, function(){ $(this).hide(); });
页面有点怪异切换…请注意你的选择器。