jQuery爆炸动画不起作用

使用下面的代码发生的唯一事情是图像消失，根本没有动画。任何提示？jQuery爆炸动画不起作用

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);

来源

2012-12-28 George Ciobanu

您是否包含jQuery UI？ http://jqueryui.com/ – PhearOfRayne

你能演示一个演示吗？否则，这里什么都不做。 – Sparky

由于图像绝对位于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()图像重新追加。）

来源

2012-12-28 19:08:46 JJJ

你做同样的事情我只是我拿出了被剥削的暂停 –

没有。这是div的高度。定时器不以任何方式进入。 – JJJ

谢谢。它解决了它所有权利:)新年快乐！ –

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

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

来源

2012-12-28 19:08:06 Hogan

是的，但不是问题的原因。 – JJJ

@Juhana - 好赶上 – Hogan

-2

这是你想要将呼叫爆炸什么fadein的回调..你也需要找到图像不会再附加它。 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);

来源

2012-12-28 19:18:10

小心解释为什么这将工作，如果原来的代码不？ – JJJ

这是完美的，你为什么要把它标记下来？ –

这仅适用于您将动画应用于图像而不是div的作品。如果将动画应用于图像，原始代码也可以工作：http://jsfiddle.net/kpSrR/ – JJJ

jQuery爆炸动画不起作用

回答

相关问题