Explode animation with jquery

Question

I have a container with a span tag and if I click the span element I need to have a explode animaton and remove that element.

I am able to use fade effect but I am not sure how to use explode effect as If use this way it is just deleting without any animation:

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

Fade Effect:

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

Explode Effect

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

These are the images which are added dynamically where I am binding as follows:

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

This is where I am showing the Images:

 <div id="container">

  </div>

Is it just a typo in your question that you have "this" in quotes in this code: `$("this").hide(...)`? — nnnnnn, Nov 09 '11 at 23:01
You can most likely remove the live portion from the uploader.bind function, live hasn't played very well for me in the past when I've done it that way. What are you trying to explode? Do you have an X, that means delete, then explodes the image? http://jsfiddle.net/jancel/m6HAR/3/ — Jeff Ancel, Nov 09 '11 at 23:05
Thanks for pointing out and though if remove the quotes it's not working. — coder, Nov 09 '11 at 23:05
Ok, I added one more fiddle, that shows if you click on the span, it explodes the image, then removes the A href element. It's close probably, http://jsfiddle.net/jancel/m6HAR/3/ — Jeff Ancel, Nov 09 '11 at 23:09
@Jeff Ancel Thank yo so much and gave you lot of trouble and at last succeeded. — coder, Nov 09 '11 at 23:12

score 5 · Accepted Answer · edited Jul 15 '12 at 09:18

5

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

edited Jul 15 '12 at 09:18

Ozzy

8,244
7
55
95

answered Nov 09 '11 at 22:48

Jeff Ancel

3,076
3
32
39

Please also notice that I do include the JQueryUI library in the JSFiddle provided. – Jeff Ancel Nov 09 '11 at 22:49
Thanks for your reply but it just removes the span element and not the image. – coder Nov 09 '11 at 22:51
Can you post the html in question? This should remove the span, along with any contents in the span. It won't remove the href, maybe it'd be a better idea to move the a (link). http://jsfiddle.net/jancel/m6HAR/1/. Also, this can explode the entire link as well, just add the same .parent('a') that you see in the above fiddle. – Jeff Ancel Nov 09 '11 at 22:56
Here is one that will explode an IMG, then remove the span if you'd like. http://jsfiddle.net/jancel/m6HAR/2/ – Jeff Ancel Nov 09 '11 at 23:01
as of jQuery 1.7 you should use `on` e.g. `$('body').on('click','.container a span', function (e) { ... });` – Ozzy Jul 15 '12 at 09:09

Explode animation with jquery

1 Answers1