jQuery翻转时移动div吗？

抱歉,如果这很容易,我是jQuery新手.我正在使用Flip!插件将div旋转到位.我还想在div旋转时移动它.目前,我正在这样做：

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

它确实翻转了div,但是动画直到翻转完成后才运行,即使那样,它也会一次全部消失.由于我对javascript不太熟悉,因此我不知道这是语言的限制,还是此特定插件的限制,或者我是否做错了.有谁知道可以这样做的更好方法吗？

最佳答案

我假设翻页必须仅在幕后使用动画,默认情况下,它允许您排队多个动画,然后按顺序播放.为避免这种情况,您可以告诉给定的动画不要将其自身排入队列并立即执行.

所以试试这个：

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

有关更多信息,请参见API文档animate以及queue和dequeue.

编辑：好的,看一下翻转插件的来源,我现在相信问题是,当您运行翻转时,它实际上隐藏了元素(在您的情况下为#flipDiv),创建了一个占位符副本,并在&上执行了翻转动画.然后重新显示原始div的最终状态.这意味着即使您使动画同时发生,它也会为隐藏的div设置动画,因此它会在动画的一半或完成后突然重新出现.

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

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

当然,这实际上并不会移动原始div,因此,当翻转完成时,您的div仍将位于旧位置,因此您也需要进行移动.如果希望动画与翻转花费相同(或更少)的时间,则可以直接设置原件的marginLeft,否则也可以对其进行动画处理,以使其大致保持同步.

原文链接：https://www.f2er.com/jquery/530983.html

jQuery翻转时移动div吗？

猜你在找的jQuery相关文章