我想用javascript为整堆卡制作动画，并在按下数据过滤器按钮时隐藏它们。这样做的最佳方式是什么？
我正在考虑使用hide（）和show（）但是将内容放大并看起来很糟糕，我想做更多的淡入淡出但是想要清除网格并很好地淡化项目。 / p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-group">
<button class="button category-button" data-filter="all" type="button">
All
</button>
<button class="button category-button" data-filter="attraction" type="button">
attraction
</button>
<button class="button category-button" data-filter="bar-pub" type="button">
bar-pub
</button>
<button class="button category-button" data-filter="theater" type="button">
theater
</button>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a row of cards.</h4>
<p>This row of cards is embedded in an X-Y Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
我认为这就是你所追求的目标？
这假设每张卡片都是type类别的过滤器按钮。
请注意新的data-type已添加到卡片中以及theatre上的拼写错误。
为了实现淡入淡出效果，我们使用jQuery的fadeOut()和fadeIn()方法。您可以查看有关jQuery effects here的更多信息。
//when a button is clicked
$('.button-group button').on('click', function(){
//store the category of the clicked button
var category = $(this).attr('data-filter');
//Loop through all `.card` elements
$('.card').each(function(){
//If the current card in this loop has the same category as the button and it's not the 'all' button then hide it, otherwise fade all cards back in.
if($(this).attr('data-type') != category && category != 'all') {
$(this).fadeOut();
} else {
$(this).fadeIn()
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<div class="button-group">
<button class="button category-button" data-filter="all" type="button">
All
</button>
<button class="button category-button" data-filter="attraction" type="button">
attraction
</button>
<button class="button category-button" data-filter="bar-pub" type="button">
bar-pub
</button>
<button class="button category-button" data-filter="theatre" type="button">
theater
</button>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div data-type="bar-pub" class="card">
<img src="https://placehold.it/100x100">
<div class="card-section">
<h4>I'm the bar/pub type</h4>
<p>This row of cards is embedded in an X-Y Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div data-type="attraction" class="card">
<img src="https://placehold.it/100x100">
<div class="card-section">
<h4>I'm the attraction type</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div data-type="theatre" class="card">
<img src="https://placehold.it/100x100">
<div class="card-section">
<h4>I'm the theatre type</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
您希望将按钮上设置的数据属性应用到相应的卡片，然后从卡片中查询卡片。值：
$(function() {
$('.category-button').on('click', function() {
const filter = this.dataset.filter;
const $filteredCard = $(`.card[data-filter="${filter}"]`);
if (filter === 'all') {
$('.card').stop().fadeIn();
} else {
$filteredCard.stop().fadeIn();
$('.card').not($filteredCard).stop().fadeOut();
}
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-group">
<button class="button category-button" data-filter="all" type="button">
All
</button>
<button class="button category-button" data-filter="attraction" type="button">
attraction
</button>
<button class="button category-button" data-filter="bar-pub" type="button">
bar-pub
</button>
<button class="button category-button" data-filter="theater" type="button">
theater
</button>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div class="card" data-filter="attraction">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a row of cards.</h4>
<p>This row of cards is embedded in an X-Y Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card" data-filter="bar-pub">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card" data-filter="theater">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
</div>