用Jquery在一个接一个的动画Divs中，第2部分 [英] Animate Divs One Right After the Other with Jquery, Part 2

问题描述

我基本上是在尝试加载具有一组小部件的页面，这些小部件应该是在单击该页面的导航按钮并加载该页面后一个接一个地淡入动画的，然后再淡出动画，然后再转到单击另一个导航按钮时，转到下一页.

Im basically trying to load a page that has a set of widgets that are supposed to fade in animate one after the other when the nav button for that page is clicked and the page is loaded, and then fade out animate, before going to the next page, when another nav button is clicked.

动画中的淡入效果不是很平滑...在其他两个小部件完成对Im推动...的动画方式后，它们不会立即淡出动画，而是在前两个小部件中正确地进行了动画处理.但是其余的，根据我的时间设置，同时开始动画制作，只是比之前的小部件更慢.

The fade in animation is not smooth...the widgets dont fade in animate right after the other is finished animating the way Im pushing for... outside of the first 2 widgets, which do animate correctly. The rest however, start animating at the same time, just more slowly than the widget before it, based on my timing settings.

当我单击转到下一页时，我也无法播放动画的淡入淡出部分.

I also cant get the fadeout portion of the animation to play when I click to go to the next page.

请记住，带有窗口小部件的页面将被加载到父页面的div中，因此，如果可以的话，基本上窗口小部件位于单独的html页面(widgets.html).

Please keep in mind that the page with the widgets, is being loaded into a div on the parent page, so basically the widgets are on their own seperate html page (widgets.html) if you will.

我该如何解决这个问题?

How can I solve this issue?

父页面上的我的导航链接":

My Navigation Links on the parent page:

<!--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>

小部件页面上的动画代码:

The animation code on the widget page:

//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>

推荐答案

使用ready()函数:

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

那样，在页面加载时动画将不会运行.

That way the animations will not run while the page loads.

或者，您可以尝试:

$(window).load(function() {
      // your functions
});

这篇关于用Jquery在一个接一个的动画Divs中，第2部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！