Как убрать элемент ПОСЛЕ того, как анимация завершится? - PullRequest
Новая
       10

Как убрать элемент ПОСЛЕ того, как анимация завершится?

6 голосов
/ 16 сентября 2009

Я использую следующий код для анимации div.

<script>
  $(function() {
    $("a.shift").click(function() {
      $("#introOverlay").animate({
        height: 0,
      }, 2000)
    });
  });
</script>

Когда анимация закончится, я бы хотел ее удалить.Как я могу это сделать?

Ответы [ 4 ]

8 голосов
/ 16 сентября 2009

animate занимает еще 2 параметра, поэтому вы можете сделать: 

$("a.shift")
    .click(function() 
        {
            $("#introOverlay")
                .animate({height: 0}, 2000,"linear",function()
                    {
                        $(this).remove();
                    }
                )
        }
    );

Непроверенные.

РЕДАКТИРОВАТЬ: протестировано: вот полная страница, которую я использовал, которая расширяется до 300px, делает удаление более очевидным: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function()
            {
                $(".shift").click(function() 
                {
                    $("#introOverlay")
                    .animate({height: 300}, 2000,"linear",function()
                    {
                        $(this).remove();
                    })
                });
            });
            //]]>
        </script>
    </head>
    <body>
    <a class="shift" href="javascript:void(0)">clickme</a>
    <div id="introOverlay" style="background-color:red;height:200px;">overlay</div>
    </body>
</html>
2 голосов
/ 16 сентября 2009

JQuery animate (params, [duration], [easing], [callback]) предлагает возможность добавить обратный вызов, который вызывается при каждом завершении анимации

обратный вызов (необязательно) Функция: A функция, которая будет выполняться всякий раз, когда анимация завершается, выполняется один раз для каждый элемент анимирован против.

Синтаксис довольно прост в jQuery: 

<script>
$(function() {
    $("a.shift").click(function() {
        $("#introOverlay").animate({
        height: 0,
        }, 2000, "linear",
            function() {
                $("#introOverlay").hide();
            }
        )
        });

    })
</script>

См. Также ТАК вопрос

1 голос
/ 31 марта 2013

Поместите вызов remove() в очередь эффектов следующим образом: 

$("a.shift").click(function() {
  $("#introOverlay").animate({
    height: 0,
  }, 2000);
  $("#introOverlay").queue(function() {
    $(this).remove();
    $(this).dequeue();
  });
});
0 голосов
/ 16 сентября 2009

Используйте window.timeout с тем же количеством времени, что и анимация.

...