用jquery爆炸动画答案

【问题标题】：Explode animation with jquery用jquery爆炸动画
【发布时间】：2011-12-25 17:52:15
【问题描述】：

我有一个带有 span 标签的容器，如果我单击 span 元素，我需要一个爆炸动画并删除该元素。

我可以使用淡入淡出效果，但我不确定如何使用爆炸效果，因为如果使用这种方式它只是删除而没有任何动画：

CSS：

#container a span { display:none; background-image:url(images/remove.png); background-repeat:no-repeat; width:16px; height:16px; position:absolute; right:0px; top:0px;} 
#container a:hover span { display:block;}

淡入淡出效果：

  $('.container a span').live('click', function (e) {
                $(this).closest('div.container').fadeOut("normal", function () {
                  $(this).remove();
                                });
                return false;
   });

爆炸效果

$('.container a span').live('click', function (e) {
                    $(this).closest('div.container').fadeOut("normal", function () {
                    $(this).hide('explode', { pieces: 25 }, 600);
                      $(this).remove();
                                    });
                    return false;
});

这些是在我绑定的位置动态添加的图像，如下所示：

 uploader.bind('FileUploaded', function (up, file, res) {
            $('#container').append("<div class='container a'><a href='#'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='64' height='64'/><span></span></a></div>");

            $('.container a span').live('click', function (e) {
                $(this).closest('div.container').fadeOut("normal", function () {
                    $(this).remove();
                });
                return false;
            });
});

这是我展示图片的地方：

 <div id="container">

  </div>

【问题讨论】：

您的问题是否只是一个错字，您在此代码中的引号中有“this”：$("this").hide(...)？
您很可能会从 uploader.bind 函数中删除直播部分，过去我这样做时，直播对我来说并不是很好。你想爆炸什么？你有一个X，这意味着删除，然后爆炸图像？ jsfiddle.net/jancel/m6HAR/3
感谢您指出，但如果删除引号它不起作用。
@Jeff Ancel Yeh 我正在尝试显示删除图像。
好的，我又添加了一个小提琴，它显示如果你点击跨度，它会爆炸图像，然后删除 A href 元素。可能很接近了，jsfiddle.net/jancel/m6HAR/3

标签： jquery image animation explode

【解决方案1】：

I think this is what you want?

$('.container a span').live('click', function (e) {
    $(this).hide('explode', { "pieces":25 }, 600, function() { $(this).remove; });
    return false;
});

【讨论】：

请注意，我确实在提供的 JSFiddle 中包含了 JQueryUI 库。
感谢您的回复，但它只是删除了 span 元素而不是图像。
你能发布有问题的html吗？这应该删除跨度以及跨度中的任何内容。它不会删除href，也许移动a（链接）会更好。 jsfiddle.net/jancel/m6HAR/1。此外，这也可能会炸毁整个链接，只需添加您在上面小提琴中看到的相同的 .parent('a') 即可。
这是一个会爆炸 IMG 的方法，如果您愿意，可以移除跨度。 jsfiddle.net/jancel/m6HAR/2
从 jQuery 1.7 开始，你应该使用 on 例如$('body').on('click','.container a span', function (e) { ... });