Определение смещения в момент анимации.
Как определить значение любого из свойтв (top,left и т.д.)в момент протекания анимации. То есть движется обьект и при каждом его смещении на 1 пиксель выполняется проверка условия.
Условие: анимация не должна строиться на цикле, из-за рывков анимации. П.С. как сами значения свойств определяются писать нет нужды. |
Нашел решение но появилась другая ситуация
<script> $(document).ready(function() { animate(); }); // определение позиции картинки function position_of_img() { var $position_images=$("#block2").css("left"); return $position_images; } // анимация для изображения. function animate() { $div_too_test = $("#block2"); $div_too_test.animate( { "left": "+=1000px", }, "10000", function () { alert(position_of_img()); }); setInterval(function() { var $position_images2=$("#block2").css("left"); if ($position_images2 >= "250") { $("#block2").css("background-color","green"); } }, 200); } </script> <div id="block2"></div> И какую бы скорость в анимации не задавал, она остается одна и та же. |
короче говоря
if ($position_images2 >= "250") неправильно работает. То есть с анимацией всё ок,а вот проверка значения хромает. Наверное полученное значение в строке. Или? |
Ёма, надо же пиксели отбрасывать, черт побери!
Вопрос в следующем. КАК СРАВНИТЬ ЗНАЧЕНИЕ СТИЛЕ (ТОР) с числовым значением? пробовал replace? parseInt |
Разобрался.
Оказывается parseInt работал. но из за чего то некоректно работал в условие сравнения. Теперь работает. Привожу пример перевода значения положения элемента setInterval(function() { // берем значение положения в формате "XX.px" var $position_images2=$("#block2").css("left"); // убираем "px" $position_images2=$position_images2.replace("px",""); // превращаем в число $str2 = parseInt($position_images2); // сравниваем, число можно и в кавычках if ($str2 >= 900) { // меняем стиль $("#block2").css("background-color","green"); } else { } }, 10); Теперь нужно отключить данный setInterval. |
А зачем replace'ом убирать "px", ведь parseInt и так это сделает за тебя:
var position = '132px'; alert(parseInt(position)); Что бы останавливать setInterval, воспользуйтесь функцией clearInterval |
walik,
Уже нашел, спасисбо. Но вот беда, при любом интервале пару пикселей проходят. Например анимация идет 3000 ,а интервал проверки позиции элемента 1 и в итоге 2 пикселя проскальзывают. |
Часовой пояс GMT +3, время: 02:07. |