Estoy usando Javascript y jQuery y he estado tratando de hacer un sitio web rápido para mostrárselo a mi profesor de música.
Cuando paso el mouse sobre un objeto invisible, la animación ocasionalmente comienza dos veces o se repite para siempre, luego muestra la pantalla que quiero que muestre. Cuando quito el mouse de él, simplemente vuelve a hacer la animación normal a 0px, pero luego, sin razón aparente, vuelve a hacer la animación de inicio, luego la animación de apagado, luego el inicio, y así sucesivamente.
Aquí hay un fragmento de mi código. Dime si necesitas más.
$(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>Intente seleccionar el elemento solo si está animado:
$(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' }) }); });