Question

html代码

<div class="row">
<div class="wp">
    <span name="all">all</span>
    <span name="web">web design</span>
    <span name="php">php</span>
    <span name="wordpress">wordpress</span>
    <span name="html">html</span>
</div>
    <ul>
        <li name="web">web design</li>
        <li name="wordpress">wordpress</li>
        <li name="php">php</li>
        <li name="html">html</li>
        <li name="wordpress">wordpress</li>
        <li name="php">php</li>
        <li name="html">html</li>
        <li name="web">web design</li>
        <li name="web">web design</li>
        <li name="html">html</li>
        <li name="php">php</li>
        <li name="html">html</li>
        <li name="php">php</li>
        <li name="wordpress">wordpress</li>
        <li name="web">web design</li>
        <li name="wordpress">wordpress</li>
        <li name="web">web design</li>
        <li name="html">html</li>
        <li name="php">php</li>
        <li name="wordpress">wordpress</li>
        <li name="wordpress">wordpress</li>
        <li name="html">html</li>
        <li name="php">php</li>
        <li name="wordpress">wordpress</li>
    </ul>    
</div>

Css（带scss）

*{
    margin: 0;
    padding: 0;
    border: none;
}

body{
    padding: 50px;
}

$col1: #ff3030;
$col2: lightblue;
$col3: lightgreen;

span{
    display: block;
    border: 1px solid $col1;
    background: $col1 + #111;
    float: left;
    cursor: pointer;
    padding: 10px;
    margin-right: 10px;
    color: #fff;
    font-family: arial;
}

.wp{
    overflow: hidden;
    margin-bottom: 20px;
}

ul{
    list-style: none;
    overflow: hidden;

}

li{
    display: block;
    float: left;
    background: $col3 - #111;
    border: 1px solid $col3 - #222;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    padding: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
    transition: 1s;
    -webkit-transition: 1s;
}

jquery的

$(document).ready(function() {
    var arr1 = [],
        arr2 = [],
        arr3 = [],
        arr4 = [];
    $('li').each(function(i, el) {
        if($(el).attr('name') == 'web') {
            arr1.push(el);
        } else if($(el).attr('name') == 'wordpress') {
            arr2.push(el);
        } else if($(el).attr('name') == 'php') {
            arr3.push(el);
        } else if($(el).attr('name') == 'html') {
            arr4.push(el);
        }
    });

    $('span').on('click', function() {
        var $this = $(this),
            elems = $('li');
        if( $this.attr('name') == 'all') {
            elems.fadeIn();
            return false
        }  else if ($this.attr('name') == 'web') {
            elems.fadeOut(600);
            setTimeout(function() {$(arr1).fadeIn(600);
            }, 800);
        }  else if ($this.attr('name') == 'wordpress') {
            elems.fadeOut(600);
            setTimeout(function() {$(arr2).fadeIn(600);
            }, 800);
        }  else if ($this.attr('name') == 'php') {
            elems.fadeOut(600);
            setTimeout(function() {$(arr3).fadeIn(600);
            }, 800);
        }  else if ($this.attr('name') == 'html') {
            elems.fadeOut(600);
            setTimeout(function() {$(arr4).fadeIn(600);
            }, 800);
        }
    });

});

小提琴链接 http://jsfiddle.net/qyY7T/ 或全屏 http://jsfiddle.net/qyY7T/embedded/result/

问题在于动画效果，这不起作用......正如你所看到的，我已经设置了一个Timout，但是没有重新开始。我会对每个人都不满意，并且问你 - 不要给任何插件。感谢名单！

Answer 1

出于某种原因，你不能淡出李，所以你必须在这里做ul是我的意思：

window.arr0 = [],
window.arr1 = [],
window.arr2 = [],
window.arr3 = [],
window.arr4 = [];
$('li').each(function (i, el) {
    arr0.push(el);
    if ($(el).attr('name') == 'web') {
        arr1.push(el);
    } else if ($(el).attr('name') == 'php') {
        arr2.push(el);
    } else if ($(el).attr('name') == 'wordpress') {
        arr3.push(el);
    } else if ($(el).attr('name') == 'html') {
        arr4.push(el);
    }
});
$('span').click(function() {
    $this = $(this);
    $('ul').fadeOut(600);
    setTimeout(function() {
        $('li').css('display', 'none');
        $(window['arr' + $this.attr('name')]).each(function() {
            this.style.display = 'block';
        });
        $('ul').fadeIn();
    }, 600);
});

http://jsfiddle.net/qyY7T/1/

没有插件的投资组合过滤器中的破碎动画

1 个答案: