jQuery移动div时翻转？

对不起，如果这是一个容易的，我是新来的jQuery。我正在使用Flip!插件来旋转div。我也想在旋转的时候移动div。目前，我这样做：jQuery移动div时翻转？

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

它翻转格，但动画不运行，直到翻转完成，而且当时去的一次。由于我对JavaScript不是很熟悉，我不知道这是否是对语言或这个特定插件的限制，或者如果我只是做错了。有没有人知道更好的方式可以做到这一点？

来源

2010-02-17 captncraig

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

那么试试这个：

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

欲了解更多信息，看看上animate的API文档，以及queue和dequeue。

编辑：好吧，看着翻转插件的源现在我相信这个问题是，当你运行flip它实际上隐藏要素（#flipDiv你的情况），创建了一个占位符克隆它在&上执行翻转动画，然后在最终状态下重新显示原始div。这意味着即使您同时进行动画，它也会动画显示隐藏的div，所以它会突然重新出现在动画中途或完成后。

你可以尝试，而不是动画的克隆，您可以从onBefore回调访问，像这样：

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

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

来源

2010-02-17 02:53:25 Alconja

可能是这种情况。这应该工作。 – Mark 2010-02-17 02:54:36

嗯。这听起来像是问题，但添加队列位并不会改变行为。插件是否有可能暂停正在进行的动画？ – captncraig 2010-02-17 03:02:08

只是好奇，但你在测试什么浏览器？ – Mark 2010-02-17 03:03:51

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

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

来源

2010-02-17 02:29:41 Mark

有趣，这似乎并没有移动它。如果我将$（this）更改为$（“＃flipDiv”），我有同样的问题，我开始。根据插件文档，当动画完成一半时，onAnimation函数被同步调用。我希望他们都同时发生。 – captncraig 2010-02-17 02:40:24

我的问题是，直到旋转完成后，它仍然没有出现任何动作，无论何时我调用animate（） – captncraig 2010-02-17 02:44:51

您是否尝试过使用onBefore而不是onAnimation？ – Mark 2010-02-17 02:47:45

jQuery移动div时翻转？

回答

相关问题