我正在尝试使用FLIP!插件并让它的内容由ajax加载。我遇到了一个问题。它只是不起作用。
我可以看到post事件发生在firebug中,但是当我在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请求。
无论如何请帮助:)
答案 0 :(得分: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');
}
})