使用 jQuery slideDown 或 toggleClass 和 css 过渡添加向下滑动效果答案

【问题标题】：Add a slide down effect with jQuery slideDown or toggleClass and css transition使用 jQuery slideDown 或 toggleClass 和 css 过渡添加向下滑动效果
【发布时间】：2018-10-05 13:57:13
【问题描述】：

我有一个简单的真正标题，我在其中放置了一个搜索栏。搜索栏占据了整个宽度。我想用 jquery 添加一个滑动切换效果，以使其上下滚动：

HTML：

<body>
    <header>
        <div class="search-bar">
            <form action="/action_page.php">
                <input type="search" name="q" placeholder="Search">
            </form>
        </div>

        <div id="top-nav" class="container-fluid">
            <div class="top-nav-wrapper">
                <a class="top-req-info" href="#" >Request Info</a>
                <ul class="top-nav-right">
                    <li class="hidden search-icon"><img src="images/search.png"></li>
                </ul>
            </div>
        </div>
    </header>
</body>

CSS：

    .search-bar input {
        background-color: #821A31;
        color: #ffff;
        font-size: 35px;
        border: 0;
        margin: 0;
        height: 76px;
        width: 100%;
        padding: 0 80px;
        font-weight: 200;
        display: none;
    }
    .search-bar input:focus, .search-bar input:focus{
        outline: none;
    }
    .search-bar input.slide-down {
        display: block;
    }
    .search-bar input::placeholder {
        color: white;
    }
    .hover-bar {
        background: #821A31!important;
    }

jQuery:

    $('.search-icon').click(function() {
        $('.search-bar input').toggleClass('slide-down');
        $('#top-nav-book, .top-req-info').toggleClass('hover-bar');
    });

问题是，如果我使用 slideToggle 而不是 toggleClass 它将不起作用，因为它会给我一个错误，如果我使用高度或可见性之间的过渡，则不会发生任何事情。我只需要在 display none 和 display block 之间创建一个令人愉快的动画，以创建一种下拉滑动效果。有什么建议吗？

【问题讨论】：

标签： jquery html css

【解决方案1】：

slideToggle() 是一个处理整个动画的 jQuery 方法。 options here的完整列表。

$('#top-nav').on('click','.search-icon',function() {
  $('input','.search-bar').slideToggle();
});

看看它的工作原理：

$('#top-nav').on('click','.search-icon',function() {
  $('input','.search-bar').slideToggle();
});

.search-bar input {
  background-color: #821A31;
  color: #ffff;
  font-size: 35px;
  border: 0;
  margin: 0;
  height: 76px;
  width: 100%;
  padding: 0 80px;
  font-weight: 200;
  display: none;
}

.search-bar input:focus,
.search-bar input:focus {
  outline: none;
}

.search-bar input::placeholder {
  color: white;
}

.hover-bar {
  background: #821A31;
}
.top-nav-right {
  list-style-type: none;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="search-bar">
    <form action="/action_page.php">
      <input type="search" name="q" placeholder="Search">
    </form>
  </div>

  <div id="top-nav" class="container-fluid">
    <div class="top-nav-wrapper">
      <ul class="top-nav-right">
        <li class="hidden search-icon"><i class="fa fa-search"></i></li>
      </ul>
    </div>
  </div>
</header>

【讨论】：