Question

我有一个已完成的按钮，它是一个基本的活动和悬停css元素。当我的“加入循环”时，我想做到这一点。单击按钮，然后将更改为简单的电子邮件表单，如https://gab.ai/

对不起我的蹩脚解释。这是我的代码https://jsfiddle.net/hkr95odp/1/

＆＃13;

.up {
  opacity: 0;
  background-color:#FFF;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:5px;
  border:2px solid #ff0000;
  display:inline-block;
  cursor:pointer;
  color:#ff0000;
  font-family:Quicksand;
  font-size:20px;
  padding:10px 10px;
  text-decoration:none;
  margin-right: 30px;
  margin-top: 20px;
  transition: all 0.5s;
  box-shadow: 0px 0px 130px -18px #ff0000;

}
.up:hover {

   background-color: #ff0000;
   color: #fff;

}
.up:active {

}

＆＃13;

Answer 1

我认为最简单的方法就是将DIV内容替换为INPUT您可以调整样式，这是您的起点：）

  <div class="sign">
    <a href="#" class="up" onClick="this.parentNode.innerHTML='<input />'">Join the loop</a>
    <a href="#" class="in">SIGN IN</a>
  </div>

工作示例：https://jsfiddle.net/hkr95odp/2/

电贺。

Answer 2

首先将注册和登录锚点包装在span元素中，以保持可读性。给注册锚一个id，这样我们就可以为它设置动画，并在注册锚之后立即添加一个最初隐藏的表单。

<body>
<header class="header">
  <div class="wrap">
   <span id="animationSandbox" style="display: block;"><h1 class="site__title mega">CONCUR</h1></span>
    <span class="beta subhead">Verifiable &#8226; Public &#8226; News</span>
  </div>
</header><!-- /.site__header -->
    <h5 class="credit">-Product of BRIMM-</h5>
  <div class="sign">
   <span id="signupSpan">
     <a id="signup" href="#" class="up">Join the loop</a>
    <form id="joinform" action="??????" class="join" style="display:none;">
      <label for="email" class="subhead">Email</label>
      <input name="email" style="width: 120px;" class="subhead">  
      <input type="submit" value="Send">  
    </form>
</span> 
   <span>
    <a href="#" class="in">SIGN IN</a>
  </span>   
</div>
  <div id="joinformdiv" class="join" style="display:none;border:1px solid red; padding: 10px;position:absolute;">
  </div>
</body>

修改css以包含与＆＃39; up＆＃39;相同的新类。上课，但没有过渡。这将分配给表单，使其具有与按钮相同的外观。

.join {
  background-color:#FFF;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:5px;
  border:2px solid #ff0000;
  color:#ff0000;
  font-family:Quicksand;
  font-size:20px;
  padding:10px 10px;
  padding-bottom:12px;
  text-decoration:none;
  margin-right: 30px;
  margin-top: 20px;
  box-shadow: 0px 0px 130px -18px #ff0000;
}

然后包含jquery库，并添加脚本：

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js">      </script>

$(document).ready(function() {
    $("#signup").on("click", function(e){
      $("#signup").fadeOut(400, function(){
              $("#joinform")
                .css({opacity: 0, display: "inline"}) 
            .animate({opacity: 1},400, function(){ $("#email").focus()})
      })
    })
});

这里发生的是当单击注册按钮时淡出，然后隐藏的表单将其不透明度设置为使其不可见并且其显示设置为内联。这很重要，因为表单是一个块元素，如果只使用fadeIn（），它会将其他内容推送到页面。然后，我们使用animate（）命令将不透明度设置为1，使元素完全可见。

与使用position和display absolute来固定电子邮件表单在按钮上的位置不同，此方法将电子邮件表单放在按钮的同一父元素内，以便滚动不会导致问题。

按钮转换为简单的电子邮件表单

2 个答案: