jQuery.mixitup

GitHub 项目地址

MixItUp jQuery 无刷新排序插件是一款鼠标滑过图片显示描述的 jQuery 过滤排序插件。具有滑动特效,鼠标滑过显示标题描述,点击按钮进行过滤排序,非常漂亮的一款插件。

<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.easing.min.js"></script>   
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script> 


$(function () { 

        var filterList = { 

            init: function () { 

                // MixItUp plugin 
                $('#portfoliolist').mixitup({ 
                    targetSelector: '.portfolio', 
                    filterSelector: '.filter', 
                    effects: ['fade'], 
                    easing: 'snap', 
                    // call the hover effect 
                    onMixEnd: filterList.hoverEffect() 
                });              

            }, 

            hoverEffect: function () { 

                // Simple parallax effect 
                $('#portfoliolist .portfolio').hover( 
                    function () { 
                        $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad'); 
                        $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');              
                    }, 
                    function () { 
                        $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad'); 
                        $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');                                
                    }        
                );               

            } 

        }; 

        // Run the show! 
        filterList.init(); 


    });

赞(0) 打赏
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

    暂无评论...