Question

很抱歉，如果这是一个简单的，我是jQuery的新手。我正在使用Flip!插件来旋转div。我也想在旋转时移动div。目前我这样做：

        $("#flipDiv").flip({
            direction:'lr',
            content:newContent
        });
        $("#flipDiv").animate({
            'marginLeft' : "+=150px"
        });

它会翻转div，但动画在翻转完成之前不会运行，即使这样，它也会一次性完成。由于我对javascript不是很熟悉，我不知道这是对语言，这个特定插件的限制，还是我做错了。有谁知道这样的事情可以做得更好吗？

Answer 1

我假设flip必须在封面下使用animate，默认情况下，您可以排队多个动画然后按顺序播放。为避免这种情况，您可以告诉给定的动画不排队并立即执行。

所以试试这个：

$("#flipDiv").flip({
 direction:'lr',
 content:newContent
});
$("#flipDiv").animate({
 'marginLeft' : "+=150px"
}, {queue: false});

有关详细信息，请查看animate上的API文档，以及queue和dequeue。

编辑：好的，查看翻页插件的来源我现在认为问题是，当您运行flip时，它实际上会隐藏元素（#flipDiv case），创建一个占位符克隆，它在其上执行其翻转动画。然后重新显示原始div处于最终状态。这意味着即使您同时进行动画制作，它也会为隐藏的div设置动画，因此它会突然重新出现在动画的一半或完成之后。

您可以尝试为克隆设置动画，您可以从onBefore回调中访问该克隆，如下所示：

$("#flipDiv").flip({
  direction:'lr',
  content:newContent,
  onBefore: function(clone) {
    clone.animate({ 'marginLeft' : "+=150px" }, {queue: false});
  })
});

当然这实际上不会移动原来的div，所以当翻盖结束时你的div仍然会在旧位置，所以你也需要改变它。如果您希望动画与翻转的时间相同（或更短），那么您可以直接设置原始的marginLeft，否则您也可以设置它的动画，使其保持大致同步。

Answer 2

$("#flipDiv").flip({
    direction:'lr',
    content:newContent,
    onAnimation: function(){
         $(this).animate({
               left: '+=150px'
         });
    }
})

如果您希望移动与翻转同时开始而不是中途移动，也可以使用onBefore而不是onAnimation。

jQuery在翻转时移动div？

2 个答案: