点击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

回答

相关问题