基于jQuery CSS3鼠标点击动画效果

分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动，允许设置动画延迟效果。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

 <div class="container">

        <div class="clearfix">

            <div class="grid12 small12">

                <div class="demos fl" id="demos">

                    <div class="elementDemos clearfix">

                        <div class="row fl">

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="slideDown" style="background: mediumspringgreen;">

                                    <h4>

                                        slideDown</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="slideUp" style="background: orchid;">

                                    <h4>

                                        slideUp</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="slideRight" style="background: gold;">

                                    <h4>

                                        slideRight</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="slideLeft" style="background: dodgerblue;">

                                    <h4>

                                        slideLeft</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="expand" style="background: darkred;">

                                    <h4>

                                        expand</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="contract" style="background: darkmagenta;">

                                    <h4>

                                        contract</h4>

                                </div>

                            </div>

                        </div>

                        <div class="row fl">

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="spin" style="background: Teal;">

                                    <h4>

                                        spin</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="sideFall" style="background: sienna;">

                                    <h4>

                                        sideFall</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="horizontal3DFlip" style="background: yellowgreen;">

                                    <h4>

                                        horizontal3DFlip</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="vertical3DFlip" style="background: mediumaquamarine;">

                                    <h4>

                                        vertical3DFlip</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="3DPivot" style="background: khaki;">

                                    <h4>

                                        3DPivot</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="rollLeft" style="background: powderblue;">

                                    <h4>

                                        rollLeft</h4>

                                </div>

                            </div>

                        </div>

                        <div class="row fl">

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="rollRight" style="background: palegreen;">

                                    <h4>

                                        rollRight</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="glideLeft" style="background: tomato;">

                                    <h4>

                                        glideLeft</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="glideRight" style="background: cyan;">

                                    <h4>

                                        glideRight</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="flipX" style="background: peru;">

                                    <h4>

                                        flipX</h4>

                                </div>

                            </div>

                            <div class="grid12 small2">

                                <div class="elementDemos-single" data-transition="flipY" style="background: cadetblue;">

                                    <h4>

                                        flipY</h4>

                                </div>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

via：http://www.w2bc.com/Article/40458