css - 如何让输入框从右向左显示？

Question

我有以下 HTML:

<div class="menus">

  <di class="menu-option">
    Weather
  </di>
  <di class="menu-option">
    Travel
  </di>
  <di class="menu-option">
    <input class="search-input" />
    <span class="search-btn">Search</span>
  </di>

</div>

CSS

.menus {
  float:right;
}
.menu-option {
  display: inline-block;
  border-left: 1px solid black;
  padding: 0 15px;
}
.search-input {
  display: none;
}

Javascript:

$('.search-btn').click(function(e) {
    $('.search-input').show();
});

此时，我可以在单击搜索文本时从隐藏状态显示搜索框。如何通过从右向左移动并将其他文本推到左侧来显示搜索框，而不是突然显示搜索框。

这是 JSFIDDLE 示例:

https://jsfiddle.net/1btm224h/5/

谢谢!

Answer 1

你可以选择:

$('.search-btn').click(function(e) {
    $('.search-input').show("slow");
});

或者你可以选择:

$('.search-btn').click(function(e) {
    $('.search-input').show(3000);
});

来自 jQuery 官方:“默认持续时间为 400 毫秒。可以提供字符串 'fast' 和 'slow' 以分别指示持续时间为 200 和 600 毫秒。”

所以你只需要添加动画持续时间，它默认内置在 .show() 中。