jquery - 通过从中心水平扩展来显示搜索框，同时提交按钮滑动以进行补偿

标签 jquery html css jquery-animate bootstrap-4

希望和愿望

  • 创建一个 .input-group，其中包含一个 input[type=text] 和一个 button[type=button]。
  • 最初隐藏文本框，只留下页面中央可见的按钮。
  • 一旦被触发，文本框将通过在两个方向(左和右)扩展其宽度来显示，按钮通过向右滑动进行补偿；因此，动画似乎(或确实)锚定在 .input-group 的中间。

@jakob 找到了 this fiddle作为一个工作示例。通过使用那个例子和其他类似的例子作为起点，我想出了一些达到这种效果的东西:

使用 HTML、CSS、JS、JQuery 和 Bootstrap4。

$('document').ready(function() {

  $('#search-label').on({
    mouseenter: function() {
      $('#search-box').stop().animate({
        width: '500px',
        borderBottom: '3px solid #373A3C'
      });
    },
    mouseleave: function() {
      $('#search-box').stop().animate({
        width: '0px',
        border: 'none'
      });
    },
    click: function() {
      $('#search-box').focus();
    }
  });

  $('#search-box').on({
    focusin: function() {
      $(this).css({
        width: '540px',
        borderBottom: : '3px solid #373ABC'
      });
    },
    focusout: function() {
      $('#search-box').stop().animate({
        width: '0px',
        border: 'none'
      });
    }
  });
});
body {
  background: #F0AD4E;
}
.card {
  margin: 0;
}
.card.block,
.card-header,
.card-footer {
  border: 0;
}
.display-3,
#search-submit {
  font-family: 'Smokum', cursive;
  font-weight: bolder;
}
.display-1,
.card-text,
.card-header {
  font-family: 'Rye', cursive;
}
.search-box {
  font-family: 'Gochi Hand', cursive;
}
.card-title {
  position: relative;
  margin-bottom: 55px;
}
.step-up {
  margin-bottom: -75px;
  font-size: 7rem;
}
.amp {
  color: #373A3C;
  opacity: 0.5;
  font-size: 15rem;
  z-index: 100;
}
.chance {
  margin-top: -90px;
  font-size: 7rem;
}
.card-text {
  max-width: 750px;
}
hr {
  border-color: #8d570c;
  max-width: 60%;
}
#search-bar {
  position: absolute;
  display: inline-block;
  width: 50%;
}
#search-box {
  width: 0;
  padding: .1em 1.75em;
  font-size: 2.5rem;
  color: #d38312;
  border: none;
  outline: none;
  background-color: #373A3C;
  opacity: 0.3;
}
#search-submit {
  background-color: #373A3C;
  padding: .1em 1.75em;
  margin-right: auto;
  top: 0;
  right: 50%;
  font-size: 2.5rem;
  box-shadow: 1px 1px 1px #111;
}
#search-box::-webkit-input-placeholder {
  color: #F0AD4E;
  opacity: 0.5;
}
#search-box::-moz-input-placeholder {
  color: #F0AD4E;
  opacity: 0.5;
}
#search-box:-moz-input-placeholder {
  color: #F0AD4E;
  opacity: 0.5;
}
#search-box:-ms-input-placeholder {
  color: #F0AD4E;
  opacity: 0.5;
}
#search-label {
  color: #373A3C;
  font-weight: 700;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Randopedia</title>
  <!--fonts-->
  <link href='https://fonts.googleapis.com/css?family=Rye|Ewert|Gochi+Hand|Smokum' rel='stylesheet' type='text/css'>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
  <!--Custom CSS-->
  <link rel="stylesheet" type='text/css' href='css/styles.css'>
</head>

<body>
  <!-- .containter -->
  <div class="card card-warning">
    <h2 class="card-header text-xs-left bg-inverse text-warning">
                Randopedia
            </h2>
    <div class='card-block text-xs-center'>
      <div class='card-title'>
        <h1 class='step-up display-3'>Step Right Up</h1>
        <h1 class='amp display-1'>&amp;</h1>
        <h1 class="chance display-3">Take A Chance!</h1>
      </div>
      <p class='card-text lead m-x-auto'>Whenever you dive head first into the enormous vault of information over at Wikipedia, there's no telling where you might end up.</p>
      <p class='card-text lead m-x-auto'>All you have to do is click the button below...</p>
      <hr>
      <div id='search-bar' class="search input-group input-group-lg">
        <input id='search-box' type='text' class='form-control search-box' placeholder='I have control issues...' name='q' />
        <span class='input-group-btn'>
                        <button type='button' id='search-submit' class='btn text-warning'>GO!</button>
                    </span>
      </div>
      <hr>
      <p class='card-text m-x-auto'>If you'd rather search for a specific topic instead,
        <label for='search-box' id='search-label' class='btn btn-link p-a-0'>click here</label>.</p>
    </div>
    <div class='card-footer bg-inverse text-xs-right'>
      <small class='text-muted text0-xs-right'>Powered by</small>  <a href='#' id='wiki-link'>Wikipedia</a>
    </div>
  </div>
  <!-- JavaScript: placed at the end of the document so the pages load faster -->
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

  <!-- Custom JS -->
  <script src='js/script.js'></script>
</body>

</html>

$('document').ready(function() {
  var $label = $('#search-label');
  var $searchBox = $('#search-box');

  function revealSearchBox() {
    $('#search-box').stop().animate({
      width: '500px',
      borderWidth: '3px',
      borderStyle: 'solid',
      borderColor: '#373A3C'
    }, 400);
  }

  function hideSearchBox() {
    $('#search-box').stop().animate({
      width: '0px',
      border: 'none'
    }, 400);
  }

  function focusOnSearch() {
    $('#search-box').focus().toggleClass('focused');
  }


  $label.addEventListener('mouseenter', revealSearchBox());
  $label.addEventListener('mouseleave', hideSearchBox());
  $label.addEventListener('click', focusOnSearch());
});
body {
  background: #F0AD4E;
}
.card {
  margin: 0;
}
.card.block,
.card-header,
.card-footer {
  border: 0;
}
.display-3,
#search-submit {
  font-family: 'Smokum', cursive;
  font-weight: bolder;
}
.display-1,
.card-text,
.card-header {
  font-family: 'Rye', cursive;
}
.search-box {
  font-family: 'Gochi Hand', cursive;
}
.card-title {
  position: relative;
  margin-bottom: 55px;
}
.step-up {
  margin-bottom: -75px;
  font-size: 7rem;
}
.amp {
  color: #373A3C;
  opacity: 0.5;
  font-size: 15rem;
  z-index: 100;
}
.chance {
  margin-top: -90px;
  font-size: 7rem;
}
.card-text {
  max-width: 750px;
}
hr {
  border-color: #8d570c;
  max-width: 50%;
}
#search-bar {
  display: inline-flex;
  width: auto;
  max-width: 70%
}
.focused {
  width: 500px;
  border: 3px solid #373A3C;
  padding-left: 4px;
}
#search-box {
  width: 0;
  padding: 0;
  font-size: 2.5rem;
  color: #d38312;
  background-color: #373A3C;
  opacity: 0.3;
}
#search-submit {
  background-color: #373A3C;
  padding: .1em 1.75em;
  margin: auto;
  top: 0;
  font-size: 2.5rem;
  box-shadow: 1px 1px 1px #111;
}
#search-box::-webkit-input-placeholder {
  color: #F0AD4E;
  opacity: 0.5;
}
#search-box::-moz-input-placeholder {
  color: #F0AD4E;
  opacity: 0.5;
}
#search-box:-moz-input-placeholder {
  color: #F0AD4E;
  opacity: 0.5;
}
#search-box:-ms-input-placeholder {
  color: #F0AD4E;
  opacity: 0.5;
}
#search-label {
  color: #373A3C;
  font-weight: 700;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Randopedia</title>
  <!--fonts-->
  <link href='https://fonts.googleapis.com/css?family=Rye|Ewert|Gochi+Hand|Smokum' rel='stylesheet' type='text/css'>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
  <!--Custom CSS-->
  <link rel="stylesheet" type='text/css' href='css/styles.css'>
</head>

<body>
  <!-- .containter -->
  <div class="card card-warning">
    <h2 class="card-header text-xs-left bg-inverse text-warning">
                Randopedia
            </h2>
    <div class='card-block text-xs-center'>
      <div class='card-title'>
        <h1 class='step-up display-3'>Step Right Up</h1>
        <h1 class='amp display-1'>&amp;</h1>
        <h1 class="chance display-3">Take A Chance!</h1>
      </div>
      <p class='card-text lead m-x-auto'>Whenever you dive head first into the enormous vault of information over at Wikipedia, there's no telling where you might end up.</p>
      <p class='card-text lead m-x-auto'>All you have to do is click the button below...</p>
      <hr>
      <div id='search-bar' class="search input-group input-group-lg text-xs-center">
        <input id='search-box' type='text' class='form-control search-box' placeholder='I have control issues...' name='q' />
        <span class='input-group-btn'>
                        <button type='button' id='search-submit' class='btn text-warning'>GO!</button>
                    </span>
      </div>
      <hr>
      <p class='card-text m-x-auto'>If you'd rather search for a specific topic instead,
        <label for='search-box' id='search-label' class='btn btn-link p-a-0'>click here</label>.</p>
    </div>
    <div class='card-footer bg-inverse text-xs-right'>
      <small class='text-muted text0-xs-right'>Powered by</small>  <a href='#' id='wiki-link'>Wikipedia</a>
    </div>
  </div>
  <!-- JavaScript: placed at the end of the document so the pages load faster -->
  <!-- jQuery library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

  <!-- Latest compiled JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

  <!-- Custom JS -->
  <script src='js/script.js'></script>
</body>

</html>

我选择包含我的整个代码，以防我的错误出现在我的 Bootstrap 中的某个地方。然而，唯一的相关元素是 #search-bar、#search-box、#search-submit 和 #search-label 。

如果有人能看到我遗漏了什么，我很乐意提供意见。此外，如果有比我弄巧成拙的方法更好、更正确的方法，我很想学习。

最佳答案

你可以这样做:

$('document').ready(function() {
  $('#search-label').on('click', function(e) {
     e.preventDefault();
     $('#search-box').focus();
     return false;
  });
  $('#search-label').mouseover(function() {
    $('#search-box').stop().animate({
      width: '500px',
      borderWidth: '1px',
      borderStyle: 'solid',
      borderColor: '#ddd'
    }, 'fast');
  });
  $('#search-label').mouseout(function() {
    if(!$('#search-box').is(":focus")){
      $('#search-box').stop().animate({
        width: '0px',
        borderWidth: '0',
      }, 'fast');
    }
  });
});

有了这个你会得到:

  • 悬停输入显示/隐藏
  • 在链接上点击输入是集中的
  • 如果输入聚焦，它保持可见

完整示例在这里https://jsfiddle.net/23ae6tjv/

关于jquery - 通过从中心水平扩展来显示搜索框，同时提交按钮滑动以进行补偿，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37773379/

上一篇：html - 我怎样才能给这个三 Angular 形添加阴影

下一篇：html - 全日历全垂直边框

相关文章：

javascript - 模块模式 javascript 实例中的变量作用域和闭包

javascript - 如何在rails link_to 的表单数据中传递查询参数而不是将其附加在url中？

javascript - 如何在 CKEditor textareas 上触发模糊事件？

html - 如何使输入高度变小？ ionic 2

jquery - 交替选择列表选项颜色

javascript - 这个切换脚本的 "wrong"是什么？

javascript - Html 表单输入已发送，然后卡在 php 页面中

javascript - 样式 "<object>"标记内部内容

CSS 网格不符合

html - CSS 100% 高度，然后滚动 DIV 不是页面

©2024 IT工具网  联系我们