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官方：＆＃34;默认持续时间为400毫秒。字符串＆＃39;快速＆＃39;并且“慢”＆＃39;可以提供指示持续时间分别为200和600毫秒。＆＃34;

所以你只需要添加动画持续时间，默认情况下内置在.show（）中。

Answer 2

看，我不确定你是否需要这个。

$('.search-btn').click(function(e) {
    $('.search-input').addClass('open');
  $('.search-input').FadeIn(300);
  $('.menus').FadeIn(300);
  $('.menus').addClass('mover');
});

.search-input.open{
  display:block;
  float:right;
}
.menus.mover{
  float:left;
}

如何让输入框从右到左显示？

2 个答案: