1

以下のコードを使用して発生する唯一のことは、アニメーションがまったくない状態で画像が消えることです。ヒントはありますか？

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

3 に答える 3

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/

（補足として、2番目に画像を再追加する理由はありませんsetTimeout()。）

于 2012-12-28T19:08:46.660 に答える
0

.hide()ベースjQueryには、最初のパラメーターとして「展開」をとることができるaは含まれていません。

jQueryUIライブラリを使用している場合は、それを含める必要があります。

于 2012-12-28T19:08:06.943 に答える
-2

これは、フェードインのコールバックで爆発する呼び出しを配置し​​たいものです。また、画像を見つけて、再度追加しないようにする必要があります。 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-28T19:18:10.273 に答える