I am using Javascript & jQuery and I have been trying to make a quick website to show to my music teacher.
When I mouse over an invisible object the animation occasionally starts twice, or repeats forever, then it shows the screen I want it to show. When I mouse off of it, it just does the normal animation back to 0px, but then for no apparent reason it does the starting animation again, then the off animation, then the start, and so on and so forth.
Here is a snippet of my code. Tell me if you need more.
$(document).ready(function() {
$("#song1").hover(function() {
$(this).css({
'width': '0px',
'height': '0px'
})
$(this).animate({
width: '560px',
height: '315px',
opacity: '100'
})
}, function() {
$(this).animate({
width: '0px',
height: '0px',
opacity: '0'
})
$(this).css({
'width': '560px',
'height': '315px'
})
})
})body {
background-color: grey
}
p {
color: white
}
#song1 {
background-color: white;
opacity: 0;
width: 560px;
height: 315px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p id="song1tx">1.</p>
<div id="song1">
<p id="song1load" style="color: black">Loading...</p>
</div>Try selecting the element only if it's animating:
$(document).ready(function() {
$("#song1:not(:animated)").hover(function() {
$(this).css({
'width': '0px',
'height': '0px'
});
$(this).animate({
width: '560px',
height: '315px',
opacity: '100'
});
});
$("#song1").mouseout(function() {
$(this).animate({
width: '0px',
height: '0px',
opacity: '0'
})
$(this).css({
'width': '560px',
'height': '315px'
})
});
});