Javascript 创建类似Flipboard弹出窗口的Jquery动画

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

当用户单击图像时，图像将扩展到一定大小，其白色背景将扩展，直到占据整个屏幕

动画完成后，将加载页面内容。

任何有关这方面的帮助都将不胜感激

非常感谢

几个月前我就这么做了，我不能在这里为您写出所有的代码，但请阅读。

//最后我找到了答案。这是完整的代码

$(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>

$（文档）.ready（函数（）{
$（'.box'）。单击（函数（e）{
if（$（'div'）.hasClass（'overlay'）==false）{
//event.preventDefault（）；
var$box=$（此项）；
$（''）.prependTo（$box）；
var$overlay=$（'.overlay'）；
$overlay.css（{
'位置'：'绝对'，
“背景色”：“白色”，
“宽度”：$box.outerWidth（真），
“高度”：$box.outerHeight（真），
“left”：$box.offset（）.left，
'top'：$box.offset（）.top，
“z索引”：9999999
});                                       
//$（$占位符）.insertAfter（'.box'）；
$overlay.animate({
宽度：$（文档）.width（），
高度：$（文档）.height（），
左：“0px”，
顶部：“0px”
}，500，函数（）{
//重置覆盖
$overlay.css（{'width'：''}）；
$overlay.css（{'height'：'1500px'}）；
//阿贾克斯
$.ajax（{
类型：“POST”，
url:“../ajax/get_event.php”，
数据：“firstname=clint&lastname=eastwood”，
成功：功能（resp）{
//我们得到了答复
$overlay.html（resp）；
$（'.window'）.fadeIn（200）；
},  
错误：函数（e）{
警报（'错误：'+e）；
}  
});
});
}否则{
//仅单击覆盖以退出
var$target=$（即target）；
如果（$target.is（'.overlay'））{
$（'.overlay'）.remove（）；
}
}  
})；//结束框单击
});//jquery结束

Codrops刚刚发布了一个特别酷的插件演示。

嗨，谢谢！我已经试过了，但是我找不到任何文档或代码级别的细节来实现它。你还有其他资源吗？下载codrops文章底部的源代码并打开文件。有一个名为js的文件夹，其中有一个名为flips.js的文件，这是大部分功能的所在。。。但是它大约有1000行代码，所以在你开始使用它之前，你应该对Javascript有一个合理的了解。我现在指的是它。我正在尝试使用Jquery动画。酷！你可以用动画来做，告诉我们你走了多远。如果你发布了你到目前为止的代码，这会很有帮助。好的，我稍后会发布。我仍在尝试使用Codrops示例。

$(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>