0
私はソートしようとしているポートフォリオを持っています。ナビゲーション内のリンクの1つをクリックすると、割り当てられたIDに基づいて画像がソートされます。私は、JQuery関数が動作しているが、アニメーション化されません。また、イメージを保持するコンテナもアニメーション化されません。すべてのCSSアニメーションがオフになっているようです...私はブートストラップも使用しています。CSSがJqueryでアニメーション化されないクラスを追加/削除します
私はこれを楽しく構築しようとしていましたが、CSSを使ってアニメーションを作成していませんでした。私は年齢のためにこれに主演した、それはおそらくシンプルですが、私はそれを見ていないです。
CSS：
.category-item{
display: block;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.hide{
display: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
のjQuery：
$(document).ready(function(){
// Portfolio Sort
$(".categorys").click(function(){
var category = $(this).attr('id');
//alert(category); //test nav
if (category == "featured") {
$(".category-item").addClass("hide");
setTimeout(function(){
$(".category-item").removeClass("hide");
}, 300);
}
})
});
ここでは、デモJSFiddle です（画像はありませんが、基本的にそれは消えと戻ってくるアニメーション化する必要があります。）
が、これはそこにちょうど見えない列を保持していないだろうことができます。それはまだスペースを取るだろうか？ – Jiroscopes
jqueryを使用している場合は、 'hide（）'関数を使用することもできます。 –