jquery - 表单展开时移动 DIV（过渡 CSS）

Question

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

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

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

Answer 1

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

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

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

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