我有一個 div 專案串列，我正在通過 JS 過濾/排序。每個專案都會影片到位 - 在這種情況下，會放大到其最終大小。
當我通過按鈕過濾專案時，螢屏上的任何內容都不會再次播放此影片。
每次選擇新按鈕時如何重置過濾器，因此無論正在過濾什么以及它當前是否在螢屏上，每個專案總是影片到位？
在這里作業 CODEPEN
<div class="filter-list">
<button class="active btn" id="all">All</button>
<button class="btn" id="oranges">Oranges</button>
<button class="btn" id="apples">Apples</button>
<button class="btn" id="bananas">Bananas</button>
</div>
<div class="grid">
<div class="artist-img item oranges">oranges</div>
<div class="artist-img item apples">apples</div>
<div class="artist-img item bananas">oranges</div>
</div>
JS
var $items = $(".item");
var $btns = $(".btn").click(function () {
if (this.id == "all") {
$items.show();
} else {
var $el = $("." this.id).show();
$items.not($el).hide();
}
$btns.removeClass("active");
$(this).addClass("active");
});
CSS
@keyframes entrance {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}
.grid > div {
padding: 1rem;
position: relative;
animation-duration: 0.5s;
animation-name: entrance;
}
uj5u.com熱心網友回復：
要重置元素，您必須將它們恢復到影片的 0%。最簡單的方法是先將它們全部隱藏。因此，與其隱藏所有當前未選擇的內容，不如先隱藏所有內容，然后再顯示您想要顯示的內容。現在立即隱藏和顯示并沒有給第一個元素恢復到 0% 所需的時間，所以設定一個 1 毫秒的超時來給它時間。這是修改后的代碼：
var $items = $(".item");
var $btns = $(".btn").click(function() {
$items.hide();
setTimeout(() => {
if (this.id == "all") {
$items.show();
} else {
$("." this.id).show();
}
}, 1);
$btns.removeClass("active");
$(this).addClass("active");
});button {
padding: 1rem;
}
.filter-list {
margin: 1rem;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1rem;
row-gap;
1rem;
}
.grid>div {
background: #000;
padding: 3rem;
animation-duration: 0.5s;
animation-name: entrance;
color: #fff;
}
@keyframes entrance {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-list">
<button class="active btn" id="all">All</button>
<button class="btn" id="oranges">Oranges</button>
<button class="btn" id="apples">Apples</button>
<button class="btn" id="bananas">Bananas</button>
</div>
<div class="grid">
<div class="artist-img item oranges">
oranges
</div>
<div class="artist-img item apples">
apples
</div>
<div class="artist-img item oranges">
oranges
</div>
<div class="artist-img item oranges">
oranges
</div>
<div class="artist-img item apples">
apples
</div>
<div class="artist-img item bananas">
bananas
</div>
<div class="artist-img item apples">
apples
</div>
<div class="artist-img item bananas">
bananas
</div>
</div>uj5u.com熱心網友回復：
這個 JS 能達到你想要的嗎？
var $items = $(".item");
var $btns = $(".btn").click(function () {
if (this.id == "all") {
$items.show();
} else {
$items.hide();
var $el = $("." this.id).show();
// $items.not($el).hide();
}
$btns.removeClass("active");
$(this).addClass("active");
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/475388.html
標籤：javascript jQuery css