Взорвать анимацию с помощью jquery - PullRequest
Новая
       11

Взорвать анимацию с помощью jquery

3 голосов
/ 10 ноября 2011

У меня есть контейнер с тегом 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;}

Fade Effect: 

  $('.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>

1 Ответ

5 голосов
/ 10 ноября 2011

Я думаю, это то, что вы хотите? 

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