點擊CSS轉換

我正在創建一個jQuery的小型排序插件。點擊CSS轉換

我想要點擊事件觸發css動畫的選項，但是我發現動畫不會被使用display: none;隱藏的元素觸發。

我嘗試創建一個類並將該類應用於元素，但這不起作用。

$('.legend li').on('click',function(){ 

     var thisClass = $(this).attr('class'); 

     $('div').not('.'+thisClass).removeClass('active'); 
     $('div.'+thisClass).addClass('active'); 
    });

我發現了一個plugin其中有我wan't，但我想嘗試建立一些更小，我總是喜歡自己嘗試爲訴諸插件之前的學習經歷相同的功能。我對他們如何運行動畫有點困惑。它看起來像內聯css，但是當我嘗試添加內聯過渡時，沒有任何效果。儘管我可以看到style標籤中的轉換。

編輯

這裏是一個小提琴。 http://jsfiddle.net/NktDU/1/

來源

2013-09-25 hyperdrive

你可以做一個jsfiddle，因爲現在它有點模糊我們正在合作？ – drip

只是一種可能性，我從來沒有使用CSS'visibility：hidden;'結合JS，但它可能工作 – samrap

@samrap它仍然會影響其他元素，一般來說，如果你這樣做，雖然 –

你可以使用jQuery的hide和show，而不是

Updated demo

$('#grid div').not('.'+thisClass).hide("fast").removeClass('active'); 
$('#grid div.'+thisClass).show("fast").addClass('active');

，並從CSS

刪除display:none或者您也可以使用CSS過渡和切換寬度，像這樣做

#grid div { 
    display: block; 
    height: 20px; 
    width: 0px; 
    margin:0px; 
    float: left; 
    -webkit-transition: all 1s ease; 
    -moz-transition: all 1s ease; 
    transition: all 1s ease; 
    background: black; 
} 
#grid .active { 
    width:20px; 
    margin: 2px; 
}

Demo for that

來源

2013-09-25 22:25:08

我認爲你必須寫這樣的圖書館是巨大的。在這種情況下，我強烈建議您致力於實施Isotope by David DeSandro。

這是你所說的插件嗎？我可以向你保證，當你想提出你自己的解決方案時，你可以使自己的同位素。我已經實施了幾次。您將學到很多東西，同時學習jQuery/JS/CSS（和媒體查詢）如何協同工作。

我已經實現了點擊排序，並且我還通過關鍵字搜索創建了我自己的排序。我可以放在一起一對夫婦小提琴的，如果你想...

編輯： 我剛纔看到的鏈接，你發現......它實際上使用同位素的框架，並建議你在某些情況下使用同位素的插件。

祝你好運！

來源

2013-09-25 22:17:01 webfrogs

回答

相關問題