动画赢得't运行到第二个循环

Animation won't run until second loop

本文关键字：运行 第二个 循环 动画      更新时间：2023-09-26

这似乎是一个非常小众的问题，但问题到此为止。

我有一个图像滚动条，需要是一个连续的循环。除了实际的动画直到第二次迭代才运行之外，一切都运行得很好。

<?php $images = scandir("Images/scroller"); ?>
var images = new Array();
images = <?php echo json_encode($images); ?>;
var i = 0;
function newImg(){
    if(i == images.length){
        i = 2;
    }
    var currentPicWidth = $("#wide").children().first().width() * -1;
    $("#wide").children().first().animate({'marginLeft': currentPicWidth}, 3200, "linear", function(){
        $("#wide").append("<img src='Images/scroller/" + images[i] + "' name='" + i + "' class='imgScroll'>'n").children().first().remove();
        i++;
        window.newImg();
    });
}
.
.
.
<div id="imageScroller">
    <div id="wide">
        <?php
            for($i = 2; $i < 10; $i++){
                echo "<img src='Images/scroller/" . $images[$i] . "' name='" . $i . "' class='imgScroll'>";
            }
        ?>
    </div>
</div>
.
.
.
<script type="text/javascript">
    $(document).ready(initPage(), newImg());
</script>

因此，由于我的动画是环保的，并且可以根据需要破坏/创建新元素，所以在3.2秒内没有动画运行，然后第一个图像被破坏，动画开始。

有什么聪明的办法吗？

您提供的语法是从原始脚本中截取的，但这不是问题所在问题是$（document）.ready（）Ready在接收到所有元素后执行，但没有完全加载（我的意思是在屏幕上渲染）。因此，在ready中，您无法像访问图像宽度这样访问元素的css属性如果你第一次提醒宽度，它将为零另一种选择是

<body onload="newImg()"> ... </body> it will work

或jquery方法

$(window).bind("load",newImg);

注意，jquery 中有加载的快捷方式

$(window).load(newImg); But it's deprecated in version 1.8
相关文章：