I'm trying to make a text fade in and fade out, alternately, as you click a button, using jQuery. I came up with this code:
$("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>That works only once (fades in first click, fades out second) and the button stops working forever.
If I comment out line 5, the button works once and everytime I press it again, the text fades in and out at the same time, which is not what I want.
What am I doing wrong?
Well, fadeToggle() is the way to go here.
But if I wanted to use only fadeIn and fadeOut for some reason... I solved it this way:
var clickCount = 0;
$('button').click(function() {
if (clickCount % 2 == 0) {
$('#p1').fadeIn();
}
else {
$('#p1').fadeOut();
}
clickCount++;
});
There is a method fadeToggle() which toggles between fadeIn and 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>