单击可淡入和淡出LI

Question

I have three separate paragraphs stored in three list-items with a continue reading image. I want only the first list-item to show. When you click the image, it should fade and show the next list-item in a fade transition. Once you reach the third one, it should fade back to the first one when you click.

My issue is that I am getting weird spacing- where the first list-items fades but still takes up space for a moment and causes the next fading in list item to jump up once the prior LI finally fades.

Opacity works perfectly with the fading but display collapses the fading out li so that list items stack on top of each other with the fading.

I could position the list items absolute with the UL position relative but I don't like the inherit lack of responsiveness with that method. I'd like to avoid it if I can help it.

Code so far-

  <ul class="copy-box">
        <li class="first active"><p>first</p></li>
        <li class="second"><p>second</p></li>
        <li class="last"><p>third</p></li>
  </ul>
  <a class="next-btn"><img src="#"></a>


  .active {
        opacity:1 !important;
        transition: .5s;
    display: block !important;
  }
  .copy-box li {
    opacity:0;
    list-style: none;
      display: none;
  }
  .copy-box li:first {
      display: inline;
  }

Jquery

  `$('.next-btn').click(function(){         
            if ( $("li.active").hasClass('last') ) {
                $('li.active').removeClass('active');
                $('.copy-box li').first('li').addClass('active');
                return false;
            } 
              else {
                $("li.active").removeClass('active').next().addClass('active');
                  return false;
              }
          })`

Answer 1

First thing to keep in mind is - display property is not animatable, so you cannot expect it to work with animation/transition.

As you want fade effect, you just need to change opacity from 0 to 1 and vice versa.

One issue you will now run into is that all paragraphs fade in/out at their respective positions and keep on taking space even though they have faded out. You would normally want them to fade in/out all on same position ie overlapping each other. For this, you need to set their position to absolute and adjust position as required.

 $('.next-btn').click(function(){ if ( $("li.active").hasClass('last') ) { $('li.active').removeClass('active'); $('.copy-box li').first('li').addClass('active'); return false; } else { $("li.active").removeClass('active').next().addClass('active'); return false; } }); 

 .copy-box { position: relative; height: 50px; } .copy-box li { opacity:0; list-style: none; position: absolute; top: 0; left: 0; transition: opacity 0.3s ease; } .copy-box li.active { opacity:1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul class="copy-box"> <li class="first active"><p>first</p></li> <li class="second"><p>second</p></li> <li class="last"><p>third</p></li> </ul> <a class="next-btn"><img src="#"></a>