How to make a simple fade in/out panel with jQuery?-CodePudding

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?

CodePudding user response：

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  ;
});

CodePudding user response：

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>