jQuery顺序组合插件

CSS3转换只能在高级版本浏览器上运行。

可扩展的过滤和命令按钮。
定制CSS3动画驱动,优雅降级。
大约30种动画过渡风格,不同easeIn和easeOut。
可选相反的顺序,你可以设置订单按钮支持与否。

调用
 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="js/jquery.quicksand.min.js"></script>
    <script type="text/javascript" src="js/jquery.sortportfolio.min.js"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link href="css/animate.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            var _filterPortfolio = $('#portfolio').filterPortfolio({
                initFilter: '#all',
                itemUL: '#itemUL',
                filterButtons: [
					{ 'link': '#all', 'dom': 'li' },
					{ 'link': '#book', 'dom': 'li.book' },
					{ 'link': '#web', 'dom': 'li.web' },
					{ 'link': '#card', 'dom': 'li.card' }
				],
                orderbyButtons: [
					{ 'link': '#visit', 'dom': 'span.visit', 'isNumber': true },
					{ 'link': '#name', 'dom': '.name' },
					{ 'link': '#date', 'dom': 'span.date', 'isNumber': true }
				],
                orderReverse: true,
                sortOption: {
                    adjustHeight: 'auto',
                    easeIn: 'twirlIn',
                    easeOut: 'twirlOut'
                }
            });

            $("select#easeInType").change(selChange);
            $("select#easeOutType").change(selChange);
            function selChange() {
                var _easeIn = $('select#easeInType').val();
                var _easeOut = $('select#easeOutType').val();
                _filterPortfolio.updateAnimation(_easeIn, _easeOut);
                $('#selections').hide();
            }

            $('#toggleImg').on('click', function (event) {
                $('#selections').toggle();
            })


        });
		
    </script>