Анимация не будет работать до второго цикла

Кажется довольно нишевым вопросом, но здесь он идет.Анимация не будет работать до второго цикла

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

<?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 секунды без анимации не работает, то первое изображение громится и анимация начинается.

Любые умные исправления?

источник

2013-07-08 Christopher

дать мне скрипку из outputed HTML, CSS nd javascript: http://jsfiddle.net/ – EmRa228

Что это за '$ (document) .ready (initPage(), newImg());'? '.ready' принимает только один аргумент и его имя функции обработчика (без скобок) –

@koala_dev, я ввел' window.newImg() 'в' initPage() ', и он все еще делает это. Возможно, это был неправильный синтаксис, но Chrome не поймал его, не сделал jsfiddle, и он работал нормально. – Christopher

Синтаксиса вы предоставили вырезан из оригинального сценария, но это не проблема Проблемы $ (документ) .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

источник

2013-07-08 06:46:12

Анимация не будет работать до второго цикла

ответ

Смежные вопросы