jquery - jQuery爆炸动画不起作用

Question

使用下面的代码唯一发生的事情是图像消失了，根本没有动画。有什么提示吗？

var img1 = $('<img src="image' + num + '.jpg" />').css({"position": "absolute"});
var div = $('<div id="wtf">').css({
        "position": "absolute",                    
        "left": targetX-80,
        "top": targetY-112.5
    });


    setTimeout(function() {div.append(img1).hide().fadeIn(400);}, 500);


    setTimeout(function() {div.append(img1).hide("explode", { pieces: 16 }, 400);}, 800); //not working

    $(document.body).append(div);        

Answer 1

因为图像绝对定位在 div 内，所以 div 没有高度，所以动画运行但没有真正的效果。为 div 添加一个高度，您将看到动画。

var div = $('<div id="wtf">').css({
    "position": "absolute",     
    "height": 100,               
    "left": targetX-80,
    "top": targetY-112.5
});

演示：http: //jsfiddle.net/Cm5qD/

（作为旁注，没有理由在第二个中重新附加图像setTimeout()。）

Answer 2

基础 jQuery 不包含.hide()可以将“爆炸”作为第一个参数的 a。

如果您使用的是 jQueryUI 库，则需要包含它。

Answer 3

这就是您希望在淡入淡出的回调中调用爆炸的内容。您还需要找到图像而不是再次附加它。 http://jsfiddle.net/jxZAW/

var img1 = $('<img src="http://placekitten.com/200/200" />').css({"position": "absolute"});
var div = $('<div id="wtf">').css({
        "position": "absolute",                    
        "left": 200,
        "top": 200
    });


    div.append(img1).hide().fadeIn(400,function(){
        div.find('img').hide('explode', { "pieces":16 }, 600, function() { $(this).remove; });
    });

   $(document.body).append(div);