Estoy tratando de hacer que un texto se desvanezca y desaparezca, alternativamente, mientras hace clic en un botón, usando jQuery. Se me ocurrió este código:
$("button").click(function() { $('#p1').fadeIn(); $("button").click(function() { $('#p1').fadeOut(); $('button').off("click"); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button>Button</button> <p id='p1'> Paragraph </p>Eso funciona solo una vez (se desvanece en el primer clic, se desvanece en el segundo) y el botón deja de funcionar para siempre.
Si comento la línea 5, el botón funciona una vez y cada vez que lo presiono de nuevo, el texto aparece y desaparece al mismo tiempo, que no es lo que quiero.
¿Qué estoy haciendo mal?
Bueno, fadeToggle() es el camino a seguir aquí.
Pero si quisiera usar solo fadeIn y fadeOut por alguna razón... lo resolví de esta manera:
var clickCount = 0; $('button').click(function() { if (clickCount % 2 == 0) { $('#p1').fadeIn(); } else { $('#p1').fadeOut(); } clickCount++; });Hay un método fadeToggle() que alterna entre fadeIn y fadeOut.
$("button").click(function() { $('#p1').fadeToggle(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <button>Button</button> <p id="p1">Paragraph</p>