Анимация Divs один за другим с помощью Jquery - PullRequest
Новая
       4

Анимация Divs один за другим с помощью Jquery

8 голосов
/ 16 декабря 2010

Я пытаюсь анимировать несколько делений, постепенно появляясь, один за другим в последовательности, когда страница загружаетсяЯ также хочу сделать это в обратном порядке, постепенно исчезая, когда я нажимаю, чтобы перейти на другую страницу.Как мне настроить это в jquery?

Ответы [ 3 ]

5 голосов
/ 16 декабря 2010

Трудно привести пример, поскольку в jQuery существует множество способов анимации, но вот простой пример.Анимация двух <div> с, одна за другой (при загрузке страницы):

См. Рабочий пример здесь: http://jsfiddle.net/andrewwhitaker/p7MJv/

HTML: 

<div id="animation-one">Hello!</div>
<div id="animation-two">Jquery Animate!</div>

CSS:

#animation-one,
#animation-two
{
    opacity:0;
    top: 30px;
    width: 400px;
    height: 100px;
    background-color:#00CCCC;
    font-size:35pt;
    position:absolute;
}

#animation-one
{
    background-color:#CCCC33;
    top:130px;
}

JavaScript: 

$("#animation-one").animate({
    opacity:1.0}, 700,
    function() {
        // Callback function: This is called when 'animation-one'
        // is finished.
        $("#animation-two").animate({
            opacity: 1.0
        }, 700);
    }
);

Вот что происходит:

  • Два <div> на странице с CSS opacity: 0
  • Когда страница загружена, <div> с идентификатором animation-one анимируется в течение 700 миллисекунд от непрозрачности 0 до непрозрачности 1.
  • После завершения анимации animation-one s другой<div> (с идентификатором animation-two) имеет анимацию, запускаемую аналогичным образом.

Теперь затухание <div> аналогично.Я предполагал, что ваша ссылка просто указывает на другую страницу, поэтому я приостановил следующую ссылку до завершения анимации:

Это предполагает, что у вас есть ссылка <a> с идентификатором next-page, но на самом деле это может быть любой селектор:

HTML: 

<a id="next-page" href="http://www.google.com">Google</a>

JavaScript: 

$("#next-page").click(function($event) {
    $event.preventDefault();
    var href = $(this).attr("href");

    $("#animation-two").animate({
        opacity: 0}, 700,
        function() {
            // Callback function:  This is called when 'animation-two'
            // is finished.
            $("#animation-one").animate({
                opacity: 0}, 700,
                function() {
                    // Direct the user to the link's intended
                    // target.
                    window.location = href;
                });
    })
});

Вот что происходит:

  • При нажатии на ссылку с идентификатором next-page происходит аналогичная последовательность анимации, как описано выше, но в обратном порядке.
  • После последней анимации ссылка выполняется правильно.

Я думаю, что пример из ссылки выше должен помочь.Кроме того, проверьте и ознакомьтесь с документами на animate .

Надеюсь, что это поможет!

Редактировать: Добавление ссылки на другой пример, посколькуOP хочет анимировать сразу несколько <div> с: http://jsfiddle.net/andrewwhitaker/n3GEB/. Это перемещает общий код в функции и, как мы надеемся, облегчает чтение примера.

0 голосов
/ 16 декабря 2010

Я бы посмотрел на использование обратных вызовов и очередей.

Взгляните на это:

jQuery queue events http://api.jquery.com/queue/

Надеюсь, это точка в правильном для вас направлении.

0 голосов
/ 16 декабря 2010

Обратите внимание, что функции анимации jQuery принимают обратный вызов в качестве конечного параметра.Эта функция вызывается, когда анимация завершена.Вы начнете анимацию следующего DIV в этом обратном вызове.Другим вариантом будет fxQueues .

Не существует идеального способа обратить анимацию, когда вы покидаете страницу.Вы можете сделать это для ссылок на своей странице, выполнив что-то вроде: 

$("a").click(function()
{
    var target = $(this).href;
    // Do animation
    // In the final completion callback, do
    window.location.href = target;
});

(обратите внимание, я не гарантирую, что это работает, это просто псевдокод)

...