Question

只是编写一些CSS，我有一个非常酷的搜索表单，你点击搜索图标，然后在CSS中使用“transition：width 0.5 ease-in-out”进行扩展。大。这很好。

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

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

Answer 1

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

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

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

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