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()，它可以将“爆炸”作为第一个参数。

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

Answer 3

这就是你想要在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);

jQuery爆炸动画不起作用

3 个答案: