0

我正在使用 jquery 创建一个迷你排序插件。

我想选择在点击事件上触发 css 动画，但我发现动画不会在使用display: none;.

我尝试创建一个类并将该类应用于元素，但这不起作用。

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

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

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

我找到了一个插件，它具有我不想要的相同功能，但我想尝试构建更小的东西，我总是喜欢在求助于插件之前尝试自己作为一种学习体验。我对他们如何运行动画有点困惑。它看起来像内联 css，但是当我尝试添加内联转换时没有效果。即使我可以看到样式标签中的过渡。

编辑

这是一个小提琴。 http://jsfiddle.net/NktDU/1/

4

2 回答 2

1

你可以使用hidejQueryshow代替

更新的演示

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

并display:none从 CSS中删除

或者你可以只使用 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;
}

演示

于 2013-09-25T22:25:08.290 回答
0

我认为你必须为这样的东西编写的图书馆是巨大的。在这种情况下，我强烈建议您努力实施Isotope by David DeSandro.

这是你说的插件吗？我可以向您保证，当您想提出自己的解决方案时，您可以自己制造同位素。我已经实施了几次。您将学到很多东西，同时学习 jQuery/JS/CSS（和媒体查询）如何协同工作。

我已经实现了点击排序，并且我还通过关键字搜索创建了自己的排序。如果你愿意，我可以把几个小提琴放在一起...

编辑： 我刚刚看到您找到的插件的链接......它实际上使用同位素的框架，并建议您在某些情况下使用同位素。

祝你好运！

于 2013-09-25T22:17:01.703 回答