Question

我有一个放大镜，当你点击它时，它会作为一个搜索框展开，但过渡是突然的。如何顺利切换。这是我的代码：

导航栏带文字

  <!-- Define your search form -->
  <form class="navbar-form navbar-left" role="search">
    <!-- Define a button to toggle the search area -->
    <button id='search-button' class='btn btn-default ' style="background-color: #ffffff !important;"><img src="magnifying-glass-search1.png"></button>
    <!-- Create your entire search form -->
    <div id='search-form' class="form-group">
      <div class="input-group">
        <span id='search-icon' class="input-group-addon"><img src="magnifying-glass-search1.png"></span>
        <input type="text" class="form-control" placeholder="Search">
      </div>
    </div>
  </form>

    <script type='text/javascript'>
  // When your page loads
  $(function(){
     // When the toggle areas in your navbar are clicked, toggle them
     $("#search-button, #search-icon").click(function(e){
         e.preventDefault();
         $("#search-button, #search-form").toggle();
     });
  })  
  </script>

Answer 1

只需在toggle函数中添加缓动函数名称即可。像这样：

$(function(){
     // When the toggle areas in your navbar are clicked, toggle them
     $("#search-button, #search-icon").click(function(e){
         e.preventDefault();
         $("#search-button, #search-form").toggle(250, "linear");
     });
  })

此外，您应该隐藏包含搜索输入的div，这样当您切换时，它将显示并且图标将隐藏。

Answer 2

您可以使用以下方式更改动画速度：

$("#search-button, #search-form").toggle(5000);

或使用关键词（此外，您可以在动画完成时添加动作）：

<script type='text/javascript'>
  // When your page loads
  $(function(){
     // When the toggle areas in your navbar are clicked, toggle them
     $("#search-button, #search-icon").click(function(e){
         e.preventDefault();
         $("#search-button, #search-form").toggle("slow", function() {
            // Animation complete.
          });
     });
  })  
  </script>

我有一个切换按钮，但需要顺利扩展而不是突然

2 个答案: