從CSS類動畫顯示/隱藏

Question

我是JavaScript和jQuery的新手，所以請對我溫柔。我試圖根據它是否具有某個類別來動畫顯示/隱藏多個div。

基本上，我爲攝影師創建一個網站，並在頂部有一個過濾器列表，每個div都有一個「組合項目」類以及所有類別的附加類在，所以家庭/婚禮/孩子/夫婦。任何圖像可以有多個類。

我想要做的是點擊家庭鏈接，它隱藏任何沒有家庭課的東西。如果我然後點擊婚禮，它會關閉當前沒有婚禮課的任何東西，並打開目前關閉的任何有婚禮課程的課程。

我目前使用下面的代碼工作，但這只是簡單地關閉所有東西，然後打開那些需要類的東西。另外我不知道如何爲它添加動畫。

function portfolioItems(filter) { 
$(".portfolio-items").hide(); 
$("."+filter).show(); } 

function initEventHandlers() { 
$(".port-all").click(function() { 
    $(".portfolio-items").show(); 
    return false; 
}) 
$(".port-wedding").click(function() { 
portfolioItems("wedding"); 
return false; 
}) 
$(".port-family").click(function() { 
portfolioItems("family"); 
return false; 
}) 
$(".port-kids").click(function() { 
portfolioItems("kids"); 
return false; 
}) 
$(".port-couples").click(function() { 
portfolioItems("couples"); 
return false; 
}) } 

的HTML是...

<div class="portfolio-container"> 
     <div class="portfolio-links"> 
      <a href="#"><img alt="All" class="port-all" src="images/port-all.png" /></a> 
      <a href="#"><img alt="family" class="port-family" src="images/port-family.png" /></a> 
      <a href="#"><img alt="wedding" class="port-wedding" src="images/port-wedding.png" /></a> 
      <a href="#"><img alt="couples" class="port-couples" src="images/port-couples.png" /></a> 
      <a href="#"><img alt="kids" class="port-kids" src="images/port-kids.png" /></a> 
     </div> 
     <div class="portfolio"> 
      <div class="portfolio-items wedding couples family"></div> 
      <div class="portfolio-items kids"></div> 
      <div class="portfolio-items wedding kids family"></div> 
      <div class="portfolio-items couples"></div> 
      <div class="portfolio-items couples kids family"></div> 
      <div class="portfolio-items wedding"></div> 
     </div> 
    </div> 

Answer 1

首先，你可以不使用選擇（look here！），以避免隱藏您的所有照片。只需將照片分配給您的兩個班級。事情是這樣的

<div class="portfolio-items wedding"></div> 
    <div class="portfolio-items family"></div> 
    <div class="portfolio-items kids"></div> 

然後你就可以用這種方式

function portfolioItems(filter) { 
     $(".portfolio-items:not(."+filter+")").hide(); 
    } 

其次，你可以隱藏一些類別，而不是由多次重複相同的代碼創建一個泛型函數重寫您portfolioItems功能。

Answer 2

你可以試試這個：

function portfolioItems(filter) { 
    $(".portfolio-items.not("+filter+")").fadeOut(); 
    $("."+filter).fadeIn(); 
} 

Answer 3

這裏有一個方法，我發現有用的通過CSS過濾。我喜歡在鏈接上使用數據屬性來指定過濾器。首先，設置了一些鏈接導航和投資組合的一些圖片或div的：

<!-- set up some navigation --> 
<nav> 
    <a href="#" class="filter">All Photos</a> 
    <a href="#" class="filter" data-filter=".family">Family Photos</a> 
    <a href="#" class="filter" data-filter=".art">Art Photos</a> 
    <a href="#" class="filter" data-filter=".wombats">Wombat Photos</a> 
</nav> 

<!-- set up a portfolio --> 
<div class="portfolio"> 
    <div class="family item">Some family image or something</div> 
    <div class="art item"> Some art image or something</div> 
    <div class="wombats item">Some wombat image or something</div> 
    <div class="wombats item">Some wombat image or something</div> 
    <div class="art item"> Some art image or something</div> 
</div> 

注意如何各一個標籤已經在類名你想要作爲過濾器的數據 - 使用過濾器屬性。你可以在這裏指定多個類，它的工作原理是一樣的。例如「.wombat.family」會讓你在你的投資組合中使用DOUBLE過濾器。

這裏有一個腳本，將幫助您設置過濾：

//on document ready 
$(document).ready(function(){ 

    //when you click <a> tag in the <nav> 
    $("nav a").click(function(e){ 

    //if the <a> has a data-filter attribute 
    if($(this).attr("data-filter")){ 

     //show all the .items with the class in the data-filter attribute 
     $(".portfolio .item"+$(this).attr("data-filter")).show(300); 

     //hide all the .items that do not have that class 
     $(".portfolio .item:not("+$(this).attr("data-filter")+")").hide(300); 

    }else{ 

     //if there's no data-filter attribute, show all the images 
     $(".portfolio .item").show(300); 
    } 
    }); 
}); 

對於這一個，我只是用在秀（）一個時間和隱藏（）函數，但淡入（） fadeOut（）也可能適用於你。

要啓用「全部」過濾器，我根本沒寫一個數據過濾屬性的特定標籤，並確保JS知道該怎麼做（檢查的if/else）。

要記住的重要一點是對投資項目和數據過濾屬性中使用的類之間的聯繫。很簡單上手，但我相信它會得到一個有點複雜，你拿完之前:)

這裏有一個的jsfiddle打轉轉：http://jsfiddle.net/w4VWm/

祝你好運！

Answer 4

不知道到底是什麼，你要轉換的那種，但這會做淡入/淡出用很少的jQuery：

請注意，您可能能夠刪除一些東西在div但我不知道你需要什麼其他的東西的頁面

用小提琴：http://jsfiddle.net/Z5uXP/所有的

<div class="portfolio-container"> 
     <div class="portfolio-links"> 
      <a href="#" data-type="all"><img alt="All" class="port-all" src="images/port-all.png" /></a> 
      <a href="#" data-type="family"><img alt="family" class="port-family" src="images/port-family.png" /></a> 
      <a href="#" data-type="wedding"><img alt="wedding" class="port-wedding" src="images/port-wedding.png" /></a> 
      <a href="#" data-type="couples"><img alt="couples" class="port-couples" src="images/port-couples.png" /></a> 
      <a href="#" data-type="kids"><img alt="kids" class="port-kids" src="images/port-kids.png" /></a> 
     </div> 
     <div class="portfolio"> 
      <div class="portfolio-items wedding couples family"></div> 
      <div class="portfolio-items kids"></div> 
      <div class="portfolio-items wedding kids family"></div> 
      <div class="portfolio-items couples"></div> 
      <div class="portfolio-items couples kids family"></div> 
      <div class="portfolio-items wedding"></div> 
     </div> 
    </div> 
    <script> 
    $(document).ready(function(){ 
    var $container = $("div.portfolio-container"), 
     $portfolio = $container.find("div.portfolio"); 

$container 
.on("click", ".portfolio-links a", function(event){ 
    var $obj = $(this); 
    event.preventDefault(); 
    $portfolio 
    .fadeOut() 
    .queue(function(next){ 
    $($(this)[0]).css("color", "red") 
    .removeClass("family wedding couples kids") 
    .addClass($($obj[0]).data("type")); 
    next(); 
    }) 
    .fadeIn(); 
}); 
}); 

</script> 

<style> 
.portfolio .portfolio-items{ 
    display: none; 
} 
.portfolio.all .portfolio-items, 
.portfolio.family .portfolio-items.family, 
.portfolio.wedding .portfolio-items.wedding, 
.portfolio.couples .portfolio-items.couples, 
.portfolio.kids .portfolio-items.kids{ 
    display: block; 
} 
</style> 

Answer 5

全部隱藏，新的類名添加到過濾字符串，然後通過過濾字符串

http://jsfiddle.net/uhCY5/3/

var filters = ""; 

function portfolioItems(filter) { 
    filters += '.' + filter 
    $(".portfolio-items").hide(); 
    $(filters).show(); 
    $("#filter").text(filters) 
} 

function initEventHandlers() { 
    $(".port-all").click(function() { 
     filters = ""; 
     $(".portfolio-items").show(); 
     return false; 
    }) 
    // the rest is the same 
}