javascript - 简单模式 iframe 动画

Question

我正在使用 SimpleModal ( http://www.ericmmartin.com/projects/simplemodal/ )。我正在尝试让动画与 iframe 窗口配合使用。

我有 iframe 部分工作:

// Load dialog on click
    $('#clicky').click(function (e) 
    {
        $.modal('<iframe src="' + src + '" height="450" width="800" style="border:0">', 
        {
                closeHTML:"",
                containerCss:{
                                backgroundColor:"#fff", 
                                borderColor:"#fff", 
                                height:450, 
                                padding:0, 
                                width:800
                                },
                overlayClose:true
        });
    });

但我不知道如何将它连接到动画片段:

$("#sample").modal({onOpen: function (dialog) 
    {
            dialog.overlay.fadeIn('slow', function (){
                dialog.data.hide();dialog.container.fadeIn('slow', function () {
                    dialog.data.slideDown('slow')
                    });

    });

所以我希望学习如何将 iframe 模式连接到淡入/淡出动画。任何人都可以帮助我或指导我到一个我可以学习的网站吗？谢谢

Answer 1

嗯，我想通了。这是对我有用的代码:

$('#clicky').click(
    function (e) 
    {
        $.modal('<iframe src="' + src + '" height="450" width="1800" style="border:0">', 
        {

                    closeHTML:"",
                    containerCss:
                    {
                                    backgroundColor:"#fff", 
                                    borderColor:"#fff", 
                                    height:450, 
                                    padding:0, 
                                    width:800
                    },
                    overlayClose:true,
                    //below adds a open animation
                    onOpen: function (dialog){
                    dialog.overlay.fadeIn('slow');
                    dialog.data.show();
                    dialog.container.fadeIn('slow');},
                    //below adds a close animation
                    onClose: function (dialog){
                    dialog.data.fadeOut('slow');
                    dialog.container.hide('slow');
                    dialog.overlay.slideUp('slow', function () {$.modal.close();});
                    }
        });
    });

不要忘记为 src 变量添加一个网站 :)