Jquery 表单扩展时移动DIV（转换CSS）

只要写一些CSS，我就有一个非常酷的搜索表单，你点击搜索图标，它就会用CSS中的“transition:width 0.5 ease in out”展开。 伟大的那很好

但是，我计划将我的导航栏放在它右边的search div旁边，但是当用户单击search按钮时，它当然会重叠。 我想知道是否有人知道当搜索被扩展时，导航Div会自动向右移动。我还希望当表单失去焦点时，div恢复到正常状态（因为搜索栏返回“easeinout”功能）

---

我想也许有一些JQuery可以做到这一点，但如果有，我真的不知道如何编写它

确实有一个jQuery方法可以帮助您实现这一点。您可以使用来为自己处理过渡

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

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

---

您可能需要使用CSS来阻止页面断开，但是设置overflow属性应该很容易做到这一点。

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