Ajax 不能与 jquery Flip 一起使用！插入答案

【问题标题】：Ajax not working with jquery Flip! pluginAjax 不能与 jquery Flip 一起使用！插入
【发布时间】：2012-11-28 19:36:58
【问题描述】：

我正在尝试使用 FLIP！插件并让它的内容由 ajax 加载。我遇到了一个问题。它只是不工作。

我可以在 firebug 中看到 post 事件，但是当我在 FLIP 中填充“content”参数时，似乎没有任何变化！插入。

下面是我的代码，可以更好地解释事情。

<script type="text/javascript">

        function getFlipContent(url,command, target){   
            $.post(url, {"data": command}, function(response) {
                console.log(response);
                //return response;   // this is not working
                replaceHtml(target,response);  // workaround but kinda not really
            });
        }

        function replaceHtml(object,html){
            $(object).html();
            $(object).html(html);
        }

        $(function(){

            $(".flipable2").bind("click", function() {
                var url= $(this).data("url");
                var command= $(this).data("command");
                var target = $(this).data("target");
                //alert(flip);
                if (target === undefined) {
                    flip = "self";
                }
                if (target == "self") {
                    $($(this)).flip({
                        direction: 'lr',
                        color: '#ffffff',
                        content: function() {
                            getFlipContent(url, command, target);
                        }
                    });
                    return false;
                }
                else {
                    $(target).flip({
                        direction: 'lr',
                        color: '#ffffff',
                        content: function() {
                            getFlipContent(url, command, target);
                        }
                    });
                    return false;
                }
            });

        });
</script>


    <body>
    <div id="header">
        <table width="100%" cellpadding="0px" border="0px" cellspacing="0px">
            <tr>
                <td><a href="#" class="flipable2 box" data-target="#page" data-url="test.php" data-command="test">FLIP</a></td>
            </tr>
        </table>
    </div>

    <div id="page" class="box">
        BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH</td>
    </div>

所以现在我正在使用一个 replachtml 函数来手动重写我刚刚“翻转”的目标的内容。这种排序工作但会破坏动画，所以我真的更愿意使用插件的内容参数......当我这样做时，虽然它什么也没做。动画完成，但没有内容更改。我想也许我错过了一些东西。欢迎任何帮助。

这也是一个 jsfiddle：http://jsfiddle.net/mUhuN/9/ 虽然我不确定如何伪造 ajax 请求。

无论如何请帮助:)

【问题讨论】：

进行了更改但仍然不完美，尝试先获取 ajax 并将其存储在隐藏的 div 中，然后使用该 div 作为内容。有效.. 但动画似乎仍然有点笨拙

标签： jquery html ajax plugins flip

【解决方案1】：

尝试在动画之前使用回调来加载 Ajax：

$("#flipbox").flip({
    direction:'tb',
    onBefore: function(){
            console.log('before starting the animation');
    },
    onAnimation: function(){
            console.log('in the middle of the animation');
    },
    onEnd: function(){
            console.log('when the animation has already ended');
    }
})

【讨论】：