A jQuery CSS button transition animation works perfectly in CodePen, however when identical code is used in a Node.js server, the transition does not work.
No errors are thrown by the browser console.
Link to my CodePen fork:
This is the identical code being run on the server. Server HTML File:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<link rel="stylesheet/less" type="text/css"
href="/css/login_styles.less" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js"
></script> <script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/
jquery.min.js"></script>
<script>
$("#login-button").click(function(event){
event.preventDefault();
$('form').fadeOut(500);
$('.wrapper').addClass('form-success');
});
</script>
</head>
<body>
<div class="wrapper">
<div class="container">
<h1>Welcome</h1>
<form class="form">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit" id="login-
button">Login</button>
</form>
</div>
<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
Server CSS Less file: Identically copy pasted from CodePen Link
When run from the Node.js server, all works fine except the transition when the login button is clicked.
Can anyopne spot why or is this a bug within jQuery?
