フェード効果が効きません（ブートストラップ4）

インデックスページにアルファベットのフィルタを追加できました。私のコードは、このブートスニップに触発されました：https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category。このBootsnipはBootstrapに基づいています。3.3フェード効果が効きません（ブートストラップ4）

私のインデックスページは、Bootstrap 4 Betaに基づいています。

文字をクリックしてアルバムをフィルタリングするときにフェード効果がない理由はありますか？

UPDATE：

私は以下の回答に応じてコードを更新しました。私は今、ブートストラップのカードを使用していますが、私は、フィルタ適用時に、私はまだアニメーションにこだわっ：ここで...

をフェードまたは平滑効果がないことは、私の新しいバイオリンです：https://jsfiddle.net/md8fkm0d/5/

$(document).ready(function(){ 
 
    $(".filter-button").click(function(){ 
 
     var value = $(this).attr('data-filter'); 
 
     if(value == "all") { 
 
      $('.filter').show('1000'); 
 
     } 
 
     else { 
 
      $(".filter").not('.'+value).hide('3000'); 
 
      $('.filter').filter('.'+value).show('3000'); 
 
     } 
 
    }); 
 
    if ($(".filter-button").removeClass("active")) { 
 
      $(this).removeClass("active"); 
 
     } 
 
     $(this).addClass("active"); 
 
    });


 

 
    body { 
 
\t font-family: Arial; 
 
\t font-size: 14pt; 
 
\t font-weight: bold; 
 
\t color: #cc6110; 
 
\t background-color: #e3e0ce; \t \t \t \t \t \t \t \t \t /* Nenesse 8/17/2017: New color */ 
 
\t background-image: url(images/background-woodenfloor.jpg); \t /* Nenesse 8/16/2017: New background image */ \t 
 
} 
 

 
.title { 
 
    font-size : 24pt; 
 
    font-weight: bold; 
 

 
    color: #cc6110; \t \t \t \t \t \t /* Nenesse 8/16/2017: New color */ 
 
} 
 

 
img { 
 
\t border: 0; 
 
} 
 

 
a { 
 
\t font-size: 14pt; 
 
\t color: #285e80; \t \t \t \t \t \t /* Nenesse 8/16/2017: New color instead of #FFFFFF */ 
 
\t text-decoration: none; 
 
} 
 

 
a:hover { 
 
\t text-decoration: underline; 
 
\t color: #cc6110; \t 
 
} 
 

 
a:hover img#thumbimage { 
 
\t text-decoration: none; 
 
} 
 

 
.artist { \t \t \t \t \t /* Nenesse 8/16/2017: New class for different color */ 
 
\t color: #285e80; 
 
\t font-size:12pt; 
 
\t font-weight:bold; 
 
} 
 

 
.album { \t \t \t \t \t /* Nenesse 8/16/2017: new class for different color */ 
 
\t color: #cc6110; 
 
\t font-size:10pt; 
 
\t font-weight:bold; 
 
} 
 

 
.navigationline { 
 
    padding: 2px 0px; 
 
} 
 

 
.btn-info { 
 
\t background-color: #285e80; 
 
\t border-color: #cc6110; 
 
} 
 

 
.btn-info:hover { 
 
\t background-color: #cc6110; 
 
\t border-color: #285e80; 
 
} 
 
.filter-button { 
 
\t font-size: 18px; 
 
\t border: 1px solid #cc6110; 
 
\t border-radius: 5px; 
 
\t text-align: center; 
 
\t color: #cc6110; 
 
\t margin-bottom: 30px; 
 
} 
 
.filter-button:hover { 
 
\t font-size: 18px; 
 
\t border: 1px solid #cc6110; 
 
\t border-radius: 5px; 
 
\t text-align: center; 
 
\t color: #ffffff; 
 
\t background-color: #285e80; 
 
} 
 
.btn-default:active .filter-button:active { 
 
\t background-color: #285e80; 
 
\t color: white; 
 
} 
 
.card { 
 
\t margin-top: 30px; 
 
}

<head> 
 
    <meta charset="utf-8"/> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> 
 
    <title>Album List</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"></link> 
 
    <link rel="StyleSheet" type="text/css" href="enhanced exportindex_wood.css"></link> 
 
    <meta http-equiv="cache-control" content="no-cache"/> 
 
    </head> 
 
    <body> 
 
    <div class="container-fluid"> 
 
     <div class="row"> 
 
     <div class="col col-lg-12 col-md-12 col-sm-12 col-xs-12" style="color: #cc6110;" align="center"> 
 
      <h1 class="title">Album List</h1> 
 
     </div> 
 
     </div> 
 
     <div align="center"> 
 
     <button class="btn btn-default filter-button" data-filter="all">All</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterA">A</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterB">B</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterC">C</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterD">D</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterE">E</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterF">F</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterG">G</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterH">H</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterI">I</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterJ">J</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterK">K</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterL">L</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterM">M</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterN">N</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterO">O</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterP">P</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterQ">Q</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterR">R</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterS">S</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterT">T</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterU">U</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterV">V</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterW">W</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterX">X</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterY">Y</button> 
 
     <button class="btn btn-default filter-button" data-filter="letterZ">Z</button> 
 
     </div> 
 
    </div> 
 
    <hr/> 
 
    <div class="row"> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterB"> 
 
     <a href="details/8660.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/8660t.jpg" alt="Image Afrikan Basement - Unreleased Extended Versions - Disc 1"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">Bolla</h4> 
 
      <p class="card-text text-center album">Afrikan Basement - Unreleased Extended Versions - Disc 1</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterB"> 
 
     <a href="details/8666.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/8666t.jpg" alt="Image Afrikan Basement - Unreleased Extended Versions - Disc 2"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">Bolla</h4> 
 
      <p class="card-text text-center album">Afrikan Basement - Unreleased Extended Versions - Disc 2</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterJ letterD"> 
 
     <a href="details/8881.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/8881t.jpg" alt="Image A Journey To Rotterdam"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">Jepht&#233; Guillaume | Diephuis</h4> 
 
      <p class="card-text text-center album">A Journey To Rotterdam</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL"> 
 
     <a href="details/412.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/412t.jpg" alt="Image La Home Box - Disc 4"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">Laurent Garnier</h4> 
 
      <p class="card-text text-center album">La Home Box - Disc 4</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterT letterB"> 
 
     <a href="details/376.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/376t.jpg" alt="Image La Home Box - Disc 3"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">Laurent Garnier | Traumer | Bambounou</h4> 
 
      <p class="card-text text-center album">La Home Box - Disc 3</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterT letterH"> 
 
     <a href="details/447.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/447t.jpg" alt="Image La Home Box - Disc 5"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">Laurent Garnier | Traumer | Husbands</h4> 
 
      <p class="card-text text-center album">La Home Box - Disc 5</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterU letterM"> 
 
     <a href="details/305.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/305t.jpg" alt="Image La Home Box - Disc 1"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">Laurent Garnier | Uner | Marc Romboy</h4> 
 
      <p class="card-text text-center album">La Home Box - Disc 1</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterL letterV letterC"> 
 
     <a href="details/341.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/341t.jpg" alt="Image La Home Box - Disc 2"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">Laurent Garnier | Voiski | Copy Paste Soul</h4> 
 
      <p class="card-text text-center album">La Home Box - Disc 2</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM"> 
 
     <a href="details/10344.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/10344t.jpg" alt="Image Dj-Kicks - Disc 1"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">Moodymann</h4> 
 
      <p class="card-text text-center album">Dj-Kicks - Disc 1</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM"> 
 
     <a href="details/10307.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/10307t.jpg" alt="Image Dj-Kicks - Disc 2"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">Moodymann</h4> 
 
      <p class="card-text text-center album">Dj-Kicks - Disc 2</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterM"> 
 
     <a href="details/10124.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/10124t.jpg" alt="Image Dj-Kicks - Disc 3"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">Moodymann</h4> 
 
      <p class="card-text text-center album">Dj-Kicks - Disc 3</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterS letterL letterA letterR"> 
 
     <a href="details/8897.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/8897t.jpg" alt="Image Hagagatan Remixed"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">Svreca | Lucy | Alexey Volkov | R&#248;dh&#229;d</h4> 
 
      <p class="card-text text-center album">Hagagatan Remixed</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT"> 
 
     <a href="details/10673.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/10673t.jpg" alt="Image North Star/Silent Space"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">Tale Of Us</h4> 
 
      <p class="card-text text-center album">North Star/Silent Space</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT"> 
 
     <a href="details/8820.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/8820t.jpg" alt="Image Goddess Of A New Dawn"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">The Bayara Citizens</h4> 
 
      <p class="card-text text-center album">Goddess Of A New Dawn</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT"> 
 
     <a href="details/8719.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/8719t.jpg" alt="Image Mofo Congoietric"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">The Bayara Citizens</h4> 
 
      <p class="card-text text-center album">Mofo Congoietric</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT"> 
 
     <a href="details/9074.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/9074t.jpg" alt="Image The Girl And The Chameleon - Disc 1"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">The Exaltics</h4> 
 
      <p class="card-text text-center album">The Girl And The Chameleon - Disc 1</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT"> 
 
     <a href="details/9033.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/9033t.jpg" alt="Image The Girl And The Chameleon - Disc 2"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">The Exaltics</h4> 
 
      <p class="card-text text-center album">The Girl And The Chameleon - Disc 2</p> 
 
     </div> 
 
     </div> 
 
     <div style="" class="card bg-transparent col-lg-3 col-md-4 col-sm-6 filter letterT letterJ"> 
 
     <a href="details/8777.html"> 
 
      <img class="card-img-top rounded img-fluid" src="images/8777t.jpg" alt="Image Joaquin Joe Claussell Mixes"/> 
 
     </a> 
 
     <div class="card-block"> 
 
      <h4 class="card-title text-center artist">The Lower East Side Pipes | Joe Claussell</h4> 
 
      <p class="card-text text-center album">Joaquin Joe Claussell Mixes</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <br/> 
 
     <div class="value col-xs-6 col-sm-6 col-md-6" align="left">18/09/2017 00:18:40</div> 
 
     <div class="value col-xs-6 col-sm-6 col-md-6" align="Right">Powered by 
 
     <a target="_blank" href="https://www.collectorz.com/music" title="Music Collector">Music Collector</a> &amp; JHR Enhanced Details template</div> 
 
     <br/> 
 
    </div> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
    <script src="indexfilter.js"></script> 
 
    </body>

ご協力いただきありがとうございます。

出典

2017-09-10 Ness Ness

私は、使用したテンプレートのコードをコピーしてビルドしました。あなたのコードは私にはかなり面倒だったので、私はそれを変更しました。あなたが望むならばもちろん、それをあなたのデザインに戻すことができます。ボタンの1つを押すと、アニメーションが意図どおりに表示され、さらにクラスが追加されます（Laurent Garnier | Traumer | Bambounouの著者がいる場合は、「L」、「G」、 T "または" B "）。
新しい.htmlはmy webpageにあります。
備考：card - ブートストラップの要素がグリッドシステムに違反する理由はわかりません。あなたがそれを好きならあなたができる
...）一つの解決策は、ヘッダ内<style>タグであなたのbodyにoverflow-x: hidden; white-space: nowrap;を追加することですが、それはcard -elements内のすべてのテキストをも遮断します。自分でそれを把握.htmlを[windows、FireFox]で右クリックしてから「名前でページを保存...」

出典

2017-09-10 11:41:10 SearchingSolutions

ご回答ありがとうございます。残念ながら、これは簡単ではありません。私のHTMLコードは、データベースソフトウェアからXSLで生成されるので、LetterA、LetterBクラスを追加することはできません。カードdivの中に入れてください（私はそれを正直にする方法はわかりません：xslルーチンアーティストの最初の手紙を入れ、カード部門の中に適切なレタークラスを追加してください）。私のスクリプトは、アーティストのクラスの内容の最初の文字を見つけて、正しい文字でフィルタを適用することになっていました。おそらく実行可能ではないでしょうか？とにかく、カード要素内に適切なクラスを追加する方法を見つけるために、XSLコードを調べます。 –

@NessNessああ、あなたのXSLを使用していますか？私はそれについて多くのことを知らない（言わないでください：私はそれを全く知らない）が、それはかなり...違っているようです：幸運、やりがいのある仕事！ – SearchingSolutions

私は、昨日から複数のクラスをxslでdivに追加する方法を探しています。アーティストの最初の文字（複数のアーティストが異なる文字で始まる場合は複数のクラス）に従って適切なクラスを追加する方法を探しています。それは苦痛で、まだstackoverflowに関する新しい質問をすることができません。その後、私はあなたに良いと思うあなたのカードテンプレートを使用することができます;） –

答えは簡単でした。jqueryのURLソースを変更してください...私の悪い！

出典

2017-09-18 19:18:09

フェード効果が効きません（ブートストラップ4）

答えて

関連する問題