通过从中心水平扩展显示搜索框，同时提交按钮幻灯片以补偿

时间：2016-06-12 10:52:19

标签： 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>

我选择包含我的整个代码，以防我的错误位于Bootstrapping中。但是，唯一的相对元素是#search-bar，#search-box，#search-submit和#search-label。

如果有人能看到我所缺少的东西，我会喜欢这些输入。而且，如果有一种更好，更正确的方法而不是我所指出的方法，我很想学习。

1 个答案:

答案 0 :(得分：0)

你可以这样做：

$('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/

相关问题
最新问题