JSFiddle - React, Tailwind, and code Playground

by _jro

HTML

<link rel="stylesheet" type="text/css" href="http://byjakewithlove.com/code/designwoop/newsletter-signup/styles.css">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lemon">


<div id="S1D3P4G3" class="1;1"></div> <script type="text/javascript" src="http://ui.sidepage.co/4/ui.prod.old.js"></script>
  <div id="w">
    <h4>Sign up below to register for a chance at early beta testing.</h4>
    
    <div id="signup">
      <input type="email" name="email" id="email" placeholder="[email protected]" tabindex="1">
      <input type="submit" name="submit" id="submitbtn" value="Signup" class="submit-btn" tabindex="2">
    </div>
  </div>

JavaScript

var mousedownHappened = false;
$("#email").focus(function() {
    $(this).stop().animate({
        opacity: 1.0,
        width: '+=240px'
    }, 350, function() {
        // callback method
    });

    // display submit button
    $("#submitbtn").fadeIn(350);
    //console.log('focus');
});

$("#submitbtn").on("click", function(e) {
    e.stopImmediatePropagation();
    $("#signup").fadeOut(550);
    //console.log('click');
});

$("#submitbtn").mousedown(function() {
    mousedownHappened = true;
});

$("#email").blur(function() {
    if (mousedownHappened) // cancel the blur event
    {
        mousedownHappened = false;
    }
    else // blur event is okay
    {
        // Do stuff...
        $("#email").animate({
            opacity: 0.75,
            width: '-=240px'
        }, 500, function() {
            // callback method
        });

        // hide submit button
        $("#submitbtn").fadeOut(400);
        //console.log('blur');
    }
});