淡入淡出效果不起作用（引导程序4）
[英]Fade effect does not work (Bootstrap 4)
问题描述
我设法在索引页面上添加了字母过滤器。 我的代码受此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é 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ødhå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> & 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>
谢谢你的帮助。
2 个解决方案
解决方案1
0 已采纳 2017-09-10 11:41:10
我从您使用的模板中复制了代码，并将其粉碎到了您的构建中。 您的代码对我来说看起来很乱，所以我更改了它。 当然，您可以根据需要将其更改回您的设计。 按下其中一个按钮时，动画现在将按预期显示，并且我添加了更多类（因此，如果您有作者“ Laurent Garnier | Traumer | Bambounou”，则可以通过单击“ L”，“ G”，“ T”或“ B”）。
您可以在我的网页上找到新的.html 。
备注：我不知道引导程序的card -elements为什么会违反网格系统。 自己弄清楚；）一种解决方案是添加overflow-x: hidden; white-space: nowrap; overflow-x: hidden; white-space: nowrap; 你的body在<style>在头标记，但也将切断的所有文字card -elements ...
如果喜欢，可以通过右键单击[windows，FireFox]下载.html，然后“保存具有名称的页面...”。
解决方案2
0 2017-09-18 19:18:09
答案很简单，可以解决我的问题：更改jquery的url源。
如何让 Bootstrap 5 Modal Fade Out 效果起作用（除了 Bootstrap，没有 Jquery 和其他附加组件）？
[英]How to get Bootstrap 5 Modal Fade Out effect to work (without Jquery and other add-ons besides Bootstrap)?
bootstrap 3在滚动时自定义固定导航，具有淡入淡出效果
[英]bootstrap 3 customized fixed navigation on scroll with fade effect
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.