動畫要等到第二個循環才能運行

Question

似乎是一個相當小眾的問題，但這是可行的。

我有一個需要連續循環的圖像滾動器。 一切運行正常，除了實際的動畫要等到第二次迭代后才能運行。

<?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秒內沒有動畫運行，然后第一個圖像被刪除並開始動畫。

有什么聰明的解決方法嗎？

Answer 1

您提供的語法是從原始腳本中剪切出來的，但這不是問題，問題是$（document）.ready（）在接收到所有元素之后就緒執行，但未完全加載（我的意思是在屏幕上呈現）。 因此，在准備就緒時，您無法像執行圖像寬度那樣訪問元素的css屬性，並且如果u第一次通知寬度，它將為零。

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

或jquery方法

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

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

$(window).load(newImg); But it's deprecated in version 1.8

動畫要等到第二個循環才能運行

問題描述

1 個解決方案

解決方案1
1 已采納 2013-07-08 06:46:12

動畫要等到第二個循環才能運行

問題描述

1 個解決方案

解決方案1 1 已采納 2013-07-08 06:46:12

解決方案1
1 已采納 2013-07-08 06:46:12