使用jQuery后执行CSS3动画.appendTo

我想用.appendTo()来修改元素的DOM位置。一旦完成，我需要使用CSS3对元素进行动画处理。使用jQuery后执行CSS3动画.appendTo

该元素不会动画，而是捕捉到新的CSS样式。

的JavaScript：

$(".run").click(function() { 
    $(".imageOriginal").appendTo(".insert").toggleClass("imageAnimated"); 
});

HTML：

<div class="insert"> </div> 
<img src="img/img1.png" class="imageOriginal"/>

CSS：

.imageOriginal { 
    -webkit-transform: scale(0.1); 
} 
.imageAnimated { 
    -webkit-transition: all 1s ease-in-out;  
    -webkit-transform: scale(1); 
}

我分开的.appendTo()和.toggleClass()方法火在两个不同的点击事件。这种方法有效（但显然不是理想的）。追加后我也尝试使用.delay(1000)，但这也不起作用。

来源

2011-12-21 jaredrada

JQuery用户界面提供.switchClass（）函数如下所述： http://stackoverflow.com/questions/1248542/jquery-animate-with -css-class-only-without-explicit-styles – Stephen 2011-12-21 19:42:29

@Stephen他们是否更新了jQuery UI以使用CSS3转换？ – Jasper 2011-12-21 19:45:34

@Stephen请不要推荐整个（臃肿，垃圾）库，只是为了实现易于手工编写的行为的单个函数。 – Bojangles 2011-12-21 20:01:00

问题是您正在附加内容，然后同时切换类。如果您删除.appendTo()调用它正常工作：

$(".imageOriginal").toggleClass("imageAnimated");

这里是一个演示：http://jsfiddle.net/38FrD/1/

我真的不知道发生了什么，但如果你看的图像元素的萤火，你可以看到， transition即使指定了持续时间，获取的财产的持续时间也为0s。

另外.delay()只适用于队列（如.animate()调用）。

UPDATE

如果你把一个setTimeout匿名函数内部.toggleClass()呼叫，则显示为所需的工作：

$(".run").click(function() { 
    var $this = $(".imageOriginal"); 
    $this.appendTo('.insert'); 
    setTimeout(function() { 
     $this.toggleClass("imageAnimated"); 
    }, 0); 
});

这里是一个演示：http://jsfiddle.net/38FrD/2/

来源

2011-12-21 19:26:41 Jasper

谢谢我的印象.delay（）会延迟调用后发生的任何方法。仍然不知道如何解决这个问题 - 最后的手段是使用jQuery的.animate而不是CSS3 – jaredrada 2011-12-21 19:53:35

@porfuse只是好奇，为什么你将图像附加到另一个元素？此外，我用适合您的解决方案更新了我的答案。 – Jasper 2011-12-21 19:54:42

我想在一个包装的内部对一组图像进行动画处理，**除了被点击的图像有不同的动画 - 所以我最终会使用$（this）。我将点击的图像附加到另一个div，以便我可以定位它并为该特定图像提供不同的动画。 – jaredrada 2011-12-21 19:59:17

使用jQuery后执行CSS3动画.appendTo

回答

相关问题