表单展开时移动 DIV（过渡 CSS）答案

【问题标题】：Moving DIV when form expands (transition CSS)表单展开时移动 DIV（过渡 CSS）
【发布时间】：2012-04-18 03:52:56
【问题描述】：

只需编写一些 CSS，我就有一个非常酷的搜索表单，您可以在其中单击搜索图标，然后使用 CSS 中的“transition: width 0.5 ease-in-out”展开。伟大的。效果很好。

但是，我打算将导航栏放在其右侧的搜索 div 旁边，但是当用户单击搜索按钮时，它当然会重叠。我想知道是否有人知道扩展搜索时导航Div自动向右移动的方式。当表单失去焦点时，我还希望 div 恢复正常（因为搜索栏通过“缓入出”功能返回）。

我认为可能有一些 JQuery 可以做到，但我真的不知道如果有的话怎么写？

【问题讨论】：

【解决方案1】：

确实有一个 jQuery 方法可以帮助您解决这个问题。您可以使用jQuery's .animate() 为您处理过渡。

$('#search').click(function() {
    $('#navigation').animate({width: '100px'}, 500);
}

当您单击搜索元素并在 0.5 秒内为该过渡设置动画时，这会将导航的宽度缩小到 100 像素。

您可能需要使用 CSS 来阻止分页流，但设置溢出属性应该很容易。

【讨论】：

这是一个美妙的开始！谢谢。唯一的事情是，我希望它改变导航而不是缩小它。我还希望它在表单失去焦点时恢复正常（在 JS 中是“onblur”不是吗？）这只是将函数应用于单击事件然后使用“onblur”事件应用反向动画的情况?
是的，您可以使用 jQuery 创建与 blur event 类似的函数。而不是宽度，更改最合适的属性，但在不知道 HTML 结构或 CSS 的情况下，我无法真正修改我的答案来帮助你......话虽如此，如果导航是浮动的，那么它就坐了在搜索栏旁边，动画搜索栏也应该移动导航，你可能根本不需要任何 JavaScript。
听起来不错！是的，导航是一个左浮动。 #navigation { 位置：绝对；宽度：自动；高度：自动；向左飘浮;边距：5px 0 0 35px；填充：5px 0 5px 5px； }