我试图为网站创建一种俯冲滑动切换器。这是加载页面时的状态:(右侧的部分是带有display:none;的div）
FIG 1:
|---------------------------------| |-----------| |#|
| | | | |r|
| | | | |e|
| #search | | #filters | |s|
| .col-md-9 | | .col-md-3 | |u|
| | | | |l|
| | | [btn] | |t|
|---------------------------------| |-----------| |s|
单击[btn]时，#search div应该向左/向左滑动，并且#results div从右侧滑入/滑入，从而导致图2中的安排：
FIG 2:
|#| |-----------| |---------------------------------|
|s| | | | |
|e| | | | |
|a| | #filters | | #results |
|r| | .col-md-3 | | .col-md-9 |
|c| | | | |
|h| | [btn] | | |
| | |-----------| |---------------------------------|
#search div不再呈现（即display:none;），现在#results div可见。
再次单击[btn]会将其交换回原始排列。
尝试使用jquery .animate()完成此操作时，#results使其变得急促，因为FIG 3:
|#|
|s|
|e|
|a|
|r|
|c|
|h|
| |
| |
| |
|-----------| |---------------------------------|
| | | |
| | | |
| #filters | | #results |
| .col-md-3 | | .col-md-9 |
| | | |
| [btn] | | |
|-----------| |---------------------------------|
呈现为好像它已经缠绕到下一行（缺少更好的术语），直到完成过渡。
我发现this question适用于＆＃34;右导航＆＃34;但是当我尝试将它应用到我自己的方法时，它会压碎左侧部分并将中间和底部向下推到远离页面的位置，这意味着它仍然会显示＆＃34;显示＆＃34; ing（见图3）。我想要抵消这一点，除了切换显示值之外，我还要做一些摆弄负边距左边和边距右边的值。
{{1}}
我已经被遗忘了一段时间，并且非常感谢他们的帮助。