创建一个 Jquery 动画，如 Flipboard 弹出窗口答案

【问题标题】：Create a Jquery animation like Flipboard popup创建一个 Jquery 动画，如 Flipboard 弹出窗口
【发布时间】：2012-08-27 02:44:32
【问题描述】：

我想实现一个 Jquery/JS 动画，比如 Flipboard 弹出动画。

当用户点击图片时，图片会扩大到一定的大小，并且其白色背景会扩大，直到占据整个屏幕。

动画完成后，页面内容将被加载。 http://flipboard.com/

对此的任何帮助将不胜感激。

非常感谢！

【问题讨论】：

我正在尝试使用 Jquery 动画。
酷！你可以用动画来做到这一点，告诉我们你走了多远。
如果您发布到目前为止的代码将会很有帮助。
好的，我稍后会发布。我仍在尝试使用 Codrops 示例。

标签： javascript jquery animation popup flipboard

【解决方案1】：

Codrops 几个月前做过，我不能在这里为你写出所有代码，但请阅读 this article。

【讨论】：

您好，谢谢！我已经尝试过了，但我找不到任何文档或代码级别的详细信息来实现它。你还有其他资源吗..？
在 codrops 文章底部下载源代码并打开文件。有一个名为 js 的文件夹，其中有一个名为 flips.js 的文件，这是大部分功能所在的地方......但它大约有 1000 行代码，所以在启动之前你应该对 Javascript 有一个合理的理解
谢谢我现在提到它。

【解决方案2】：

<script>

//终于找到了答案。这是完整的代码。

$(document).ready(function() { 

    $('.box').click(function(e){

        if( $('div').hasClass('overlay')==false ){

        //event.preventDefault();
        var $box = $(this);

        $('<div class="overlay"></div>').prependTo($box);

        var $overlay = $('.overlay');

        $overlay.css( {
                       'position'       : 'absolute',
                       'background-color'   : 'white',
                       'width'              : $box.outerWidth(true),
                       'height'     : $box.outerHeight(true),
                       'left'       : $box.offset().left,
                       'top'        : $box.offset().top,
                       'z-index'        : 99999999
        });                                       
        //$($placeholder).insertAfter('.box');  

        $overlay.animate({
                width: $(document).width(),
                height: $(document).height(),
                left: '0px',
                top: '0px'
            }, 500, function() {
                //reset the overlay
                $overlay.css({'width': ''});
                $overlay.css({'height': '1500px'});
                //ajax    
                $.ajax({  
                    type: "POST",  
                    url: "../ajax/get_event.php",  
                    data: "firstname=clint&lastname=eastwood",  
                    success: function(resp){  
                        // we have the response  
                        $overlay.html(resp);
                        $('.window').fadeIn(200);
                    },  
                    error: function(e){  
                        alert('Error: ' + e);  
                    }  
                });
        });

        }else{
            //click only on overlay to exit
            var $target = $(e.target);    
            if ( $target.is('.overlay') ) {
               $('.overlay').remove();
            }
        }  

    });//end box click

});//end of jquery
</script>

【讨论】：

【解决方案3】：

Codrops 刚刚发布了a plugin to do this, and instructions on how to use it. 有一个特别酷的插件演示 here。

【讨论】：