2012-12-28 102 views
1

使用下面的代碼發生的唯一事情是圖像消失,根本沒有動畫。任何提示?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);   
+2

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

+0

你能演示一個演示嗎?否則,這裏什麼都不做。 – Sparky

回答

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()圖像重新追加。)

+0

你做同樣的事情我只是我拿出了被剝削的暫停 –

+0

沒有。這是div的高度。定時器不以任何方式進入。 – JJJ

+0

謝謝。它解決了它所有權利:)新年快樂! –

0

基本jQuery不包含.hide(),它可以將「爆炸」作爲第一個參數。

如果您使用jQueryUI庫,您需要包含它。

+0

是的,但不是問題的原因。 – JJJ

+0

@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); 
+0

小心解釋爲什麼這將工作,如果原來的代碼不? – JJJ

+0

這是完美的,你爲什麼要把它標記下來? –

+0

這僅適用於您將動畫應用於圖像而不是div的作品。如果將動畫應用於圖像,原始代碼也可以工作:http://jsfiddle.net/kpSrR/ – JJJ