淡入淡出效果不起作用（引导程序 4）答案

【问题标题】：Fade effect does not work (Bootstrap 4)淡入淡出效果不起作用（引导程序 4）
【发布时间】：2017-09-10 09:43:05
【问题描述】：

我设法在我的索引页上添加了一个按字母顺序排列的过滤器。我的代码在这里受到这个 Bootsnip 的启发：https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category。这个 Bootsnip 基于 Bootstrap 3.3

我的索引页面基于 Bootstrap 4 Beta。

点击字母过滤相册时没有淡入淡出效果有什么原因吗？

更新：

我已根据以下答案更新了代码。我现在正在使用 Bootstrap 卡，但是当我应用过滤器时仍然卡在动画中：没有淡入淡出或平滑效果...

这是我的新小提琴：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 {
	font-family: Arial;
	font-size: 14pt;
	font-weight: bold;
	color: #cc6110;
	background-color: #e3e0ce;									/* Nenesse 8/17/2017: New color */
	background-image: url(images/background-woodenfloor.jpg); 	/* Nenesse 8/16/2017: New background image */	
}

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

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

img {
	border: 0;
}

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

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

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

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

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

.navigationline {
  padding: 2px 0px;
}

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

.btn-info:hover {
	background-color: #cc6110;
	border-color: #285e80;
}
.filter-button {
	font-size: 18px;
	border: 1px solid #cc6110;
	border-radius: 5px;
	text-align: center;
	color: #cc6110;
	margin-bottom: 30px;
}
.filter-button:hover {
	font-size: 18px;
	border: 1px solid #cc6110;
	border-radius: 5px;
	text-align: center;
	color: #ffffff;
	background-color: #285e80;
}
.btn-default:active .filter-button:active {
	background-color: #285e80;
	color: white;
}
.card {
	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>

感谢您的帮助。

【问题讨论】：

标签： javascript jquery html css bootstrap-4

【解决方案1】：

我从您使用的模板中复制了代码并将其粉碎到您的构建中。你的代码对我来说看起来很乱，所以我改变了它。当然，如果您愿意，您可以将其更改回您的设计。当按下其中一个按钮时，动画现在将按预期显示，并且我添加了更多类（因此，如果您有作者“Laurent Garnier | Traumer | Bambounou”，您可以通过单击“L”、“G”、“ T”或“B”）。
您可以在my webpage 上找到新的.html。
备注： 我不知道为什么引导程序的card 元素违反了网格系统。自己弄清楚；）一种解决方案是将overflow-x: hidden; white-space: nowrap;添加到您的body标题中的<style>标签中，但这也会切断card元素中的所有文本...如果你喜欢它，你可以通过 [windows, FireFox] 右键单击然后“用名称保存页面...”来下载 .html

【讨论】：

您好，感谢您的回答。不幸的是，事情并不那么容易。我的 html 代码是用数据库软件的 XSL 生成的，所以，我不能在卡片 div 中添加 LetterA、LetterB 类...（老实说，我不知道该怎么做：xsl 例程找到第一个艺术家的信，并在卡片 div 中添加正确的字母类）。我的脚本应该找到艺术家课程内容中的第一个字母，并使用正确的字母应用过滤器。也许不可行？无论如何，我都会研究 XSL 代码，以了解如何在卡片元素中添加适当的类。
@NessNess 哦，你使用 XSL 吗？我对此知之甚少（不是说：我根本不知道），但看起来那很漂亮......不同:) 祝你好运，工作很艰难！
我正在寻找一种从昨天开始使用 xsl 将多个类添加到 div 的方法，以根据艺术家的第一个字母添加适当的类（如果多个艺术家以不同的字母开头，则为多个类）。这很痛苦，还不能在 stackoverflow 上提出新问题。然后，我就可以使用你觉得不错的卡片模板了 ;)
Stackoverflow 帮助我找到正确的 xsl 代码以添加适当的类进行过滤。我更新代码以匹配您的模板。它仍然不起作用：-/

【解决方案2】：

解决我的问题的答案很简单：更改jquery的url源...我的错！

【讨论】：