Fade effect does not work (Bootstrap 4)
Question
I've managed to add an alphabetical filter on my index page. My code gets inspired by this Bootsnip here: https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category . This Bootsnip is based on Bootstrap 3.3
My index page is based on Bootstrap 4 Beta.
Is there any reason why there is no fade effect when I click on a letter to filter albums?
UPDATE:
I have updated the code according to the answer below. I'm now using Bootstrap cards but I'm still stuck with animations when I apply filter: no fade or smooth effect...
Here is my new fiddle: 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>
Thanks for your help.
2 answers
solution1
0 ACCPTED 2017-09-10 11:41:10
I copyied the code from the template you used and smashed it into your build. Your code looked pretty messy to me so I changed it. Of course you can change it back to your design, if you wish to. When pushing on one of the buttons the animations will now show as intended and I added more classes (So If you have the authors "Laurent Garnier | Traumer | Bambounou" you can find them by either clicking "L", "G", "T" or "B").
You can find the new .html on my webpage .
Remark: I do not know why the card -elements of bootstrap violate the grid-system. Figure that out by yourself ;) One Solution would be to add overflow-x: hidden; white-space: nowrap; overflow-x: hidden; white-space: nowrap; to your body in a <style> tag in header, but that would also cut off all the text in the card -elements...
If you like it you can download the .html by [windows, FireFox] right-clicking and then "save page with name..."
solution2
0 2017-09-18 19:18:09
答案很简单，可以解决我的问题：更改jquery的url源。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why does this fade effect not work?
Mouseover fade effect in bootstrap template
bootstrap video carousel fade effect
How to get Bootstrap 5 Modal Fade Out effect to work (without Jquery and other add-ons besides Bootstrap)?
bootstrap 3 customized fixed navigation on scroll with fade effect
Add a fade effect to my bootstrap carousel
How to Customize bootstrap carousel using fade in effect
A JS fade effect doesn't work (for loop)
Fade in effect on document ready doesn't work
jQuery highlight effect does not work with Bootstrap's row classes
Related Tags