To improve readability, start by enclosing the signup and signin anchors within span elements. Assign an id to the signup anchor for animation purposes, and immediately follow it with a initially hidden form.
<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 • Public • 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>
Revise the CSS to include a new class that mirrors the 'up' class but lacks transition effects. Apply this class to the form so it resembles the button.
.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;
}
Next, link the jQuery library and insert the script:
<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()})
})
})
});
Upon clicking the signup button, it fades out while the previously hidden form becomes visible through opacity adjustments. This prevents pushing content downwards that would occur if using only fadeIn(). The animate() method smoothly transitions the form's opacity to full visibility.
Unlike positioning the email form absolutely over the button, this approach nests the form within the same parent element as the button to prevent issues with scrolling position.