クリックでのフェードイン/アウト

Question

3つのリスト項目に3つの別々の段落が保存されています。最初のリスト項目だけを表示します。イメージをクリックすると、フェード遷移の次のリストアイテムがフェードして表示されます。 3番目に達すると、クリックすると最初のものにフェードバックします。

私の問題は、最初のリスト項目が消えてもまだ隙間をとり、リスト項目の次のフェーディングが以前のLIが最終的に消えると跳ね上がるような奇妙な間隔になっていることです。

不透明度はフェーディングと完全に一致しますが、ディスプレイはフェーディングアウトを崩壊させて、リストアイテムがフェーディングしながら重ねて表示されます。

私はリストアイテムをULの相対的な位置に絶対配置することができましたが、そのメソッドの応答性の欠如を継承していないのは嫌です。もし私がそれを助けることができれば、私はそれを避けたいと思います。心に留めておくべき

コードので、遠

<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

最初のものは - displayプロパティがアニメーション可能ではないので、あなたはそれがアニメーション/遷移で動作するように期待することはできません。

フェード効果を適用するには、不透明度を0から1に変更するか、またはその逆に変更するだけです。

あなたが今実行する1つの問題は、すべての段落がそれぞれの位置でフェードイン/フェードアウトし、フェードアウトしてもスペースをとることです。通常は、同じ位置にすべてフェードイン/フェードアウトする、つまり互いに重なり合うようにします。このためには、絶対位置に設定し、必要に応じて位置を調整する必要があります。私はここに任意の画像を見ていないですbcoz

$('.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>