Question

我想我的问题并不在于让动画保持同步，因为这样可以防止它们彼此搞砸。

我有两个动画，在两个saparate document.ready方法的同一页面上。其中一个逐渐淡入并逐渐淡出3个图像（属于css类g_img），而另一个图像也循环地滑入和滑出其他三个图像（属于类slogans）。当单独包含在document.ready函数中时，运行这些相应动画的每个函数都可以正常工作，但是当我将它们包含在一起时，如下面的代码所示，它们开始表现得很奇怪。
例如，其中一个在1,2,2,1,3,2,1,3,2,1,3,2...序列中动画而不是正常1,2,3,1,2,3...即使我将动画放在相同的document.ready函数中，我也会得到类似于上面的内容。我该如何解决这个问题？

Ps：我刚将正在构建的页面上传到以下网址http://mygeneric.info/green/index.html，这样您就可以直观地了解正在发生的事情。请注意，该页面不会在firefox上显示。仍然需要努力。使用任何浏览器，但Firefox。

<script type = "text/javascript">
$(document).ready(function() {
    //First image in non js compliant browsers is by default displayed. 
    //Hide it for compliant browsers
    $("#green_car").hide;

    //Do same for the first slogan(smart business). 
    //Smaart business is positioned to be displayed for non js browsers.
    $(".slogans").hide();
    $("#smart_business").css("left","245px");

    (function($) {
        //The fade in out function.
        $.fn.fader = function() {
            var elements = this;
            l = elements.length;
            i = 0;

            function execute() {
                var current = $(elements[i]);
                i = (i + 1) % l;
                current
                    .fadeIn(1000)
                    .delay(8000)
                    .fadeOut(1000,execute);
            }
            execute();
            //Run the function.
            return this;
            //Making this available again to the outer function.
        };
    })(jQuery);

    $(".g_img").fader();
}); 
</script>


<script type = "text/javascript">
$(document).ready(function() {
    //Do same for the first slogan(smart business). 
    //Smaart business is positioned to be displayed for non js browsers.
    $(".slogans").hide();
    $("#smart_business").css("left","245px");

    (function($) {
        //The slide in out function.
        $.fn.slider = function() {
        var elements1 = this;
            l = elements1.length;
            i = 0;

            function execute1() {
                var current1 = $(elements1[i]);
                i = (i + 1) % l;
                current1
                    .fadeIn(100)
                    .animate({'marginLeft' : '-=240px'},500)
                    .delay(8000)
                    .animate({'marginLeft' : '+=240px'},500)
                    .fadeOut(100,execute1);
            }
            execute1();
            //Run the function.
        return this;
            //Making this available again to the outer function
        };
    })(jQuery);
    $(".slogans").slider();
}); 
</script>

Answer 1

我认为合并它们时的问题是，您已将变量i和l定义为全局变量。您的fader和slider函数适用于相同的全局变量。

我有三种不同的解决方案，你必须在两个功能中改变它：

添加var以使其local：
将l = elements.length;替换为var l = elements.length;和
i = 0;与var i = 0;。
使用,制作local：
将;替换为行,末尾的var elements1 = this;和 l = elemnts1.length;
使用不同的varibale名称：
仅在l函数中将所有m替换为i，将所有j替换为slider。

如何在同一页面上同步两个或多个动画？

1 个答案: