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

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

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

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

Затухание в анимации не плавное ... виджеты не исчезают в анимации сразу после того, как другой завершает анимацию, которую я настаиваю ... за пределами первых 2 виджетов, которые правильно анимируют.Остальные, однако, начинают анимацию одновременно, чуть медленнее, чем виджет до него, основываясь на моих настройках времени.

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

Имейте в виду, что страница с виджетами загружается вdiv на родительской странице, поэтому, по сути, виджеты находятся на отдельной отдельной html-странице (widgets.html), если хотите.

Как мне решить эту проблему?

Мои навигационные ссылки народительская страница: 

<!--The dynamic load part loads the outside page into the div-->    
<ul id="Navbar">
       <li><a href="Page1.html" class="dynamicLoad">Page1</a></li>
       <li><a href="Page2.html" class="dynamicLoad">Page2</a></li>
       <li><a href="Page3.html" class="dynamicLoad">Page3</a></li>
       <li><a href="Page4.html" class="dynamicLoad">Page4</a></li>
    </ul>

Код анимации на странице виджета: 

//Declare FadeIn Animation Rules
    <script>
    function animateIn(divId, callback) {
        $(divId).animate(
            {opacity:1.0},
            700,
            callback);
    }

    function animateIn1(divId, callback) {
        $(divId).animate(
            {opacity:1.0},
            1400,
            callback);
    }

    function animateIn2(divId, callback) {
        $(divId).animate(
            {opacity:1.0},
            2100,
            callback);
    }



    //Declare FadeOut Animation Rules

    function animateOut(divId, callback) {
        $(divId).animate(
            {opacity:0},
            700,
            callback);
    }

    function animateOut1(divId, callback) {
        $(divId).animate(
            {opacity:0},
            1400,
            callback);
    }

    function animateOut2(divId, callback) {
        $(divId).animate(
            {opacity:0},
            2100,
            callback);
    }





    //Start FadeIn Animation

    $("#MyWidget").animate(
        {opacity:1.0}, 300, 
        function() {
            animateIn1("#MyWidget1");
            animateIn2("#MyWidget2");
            animateIn3("#MyWidget3");
            animateIn4("#MyWidget4");
        }
    );


    //Start FadeOut Animation

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

        animateOut4("#MyWidget4");
        animateOut3("#MyWidget3");
        animateOut2("#MyWidget2");
        animateOut1("#MyWidget1", function() {
           animateOut("#MyWidget");
       });
    });


    </script>

Ответы [ 2 ]

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

Используйте функцию ready(): 

$(document).ready(function() {
  // your functions
});

Таким образом, анимация не будет запускаться при загрузке страницы.

В качестве альтернативы вы можете попробовать: 

$(window).load(function() {
      // your functions
});
0 голосов
/ 23 декабря 2010

Я бы посоветовал объединить фейды с обратными вызовами вместо смещения времени, возможно, что-то вроде этого: http://jsfiddle.net/p8gj8/6/

...