I am attempting to create a progress bar using the HTML marquee element. When the user clicks submit, I want to fadeIn the HTML marquee and fadeOut with AJAX success. However, when I click the submit button, the marquee does not fadeIn as expected. Here is my attempt:
$(document).ready(function(){
$('#signup-submit').click(function(){
$('.bar').fadeIn();
})
}).bar{
background:#a0a0a0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
display:none;
}
.progressing{
width:50px;
height:4px;
background:orangered;
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<marquee class="bar" scrollamount=50><div class="progressing"></div></marquee>
<input type="button" id="signup-submit" value="signup"/>However, it works without any jQuery function applied.
.bar{
background:#a0a0a0;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.progress{
width:50px;
height:4px;
background:red;
display: block;
}<marquee class="bar" scrollamount=50><div class="progress"></div> </marquee>What could be causing this issue and how can I resolve it?