обработка клика мыши при анимации
Неправильно работает код. Координата элемента id=div1 должна меняться от кликов мыши по этому элементу. По клику должна быть изменена переменная "с" , и её новое значение должно быть использовано в следующих циклах анимации. Но этого не происходит, переменная "с" не изменяется. Как здесь правильно связать функцию click и animate.
<script type="text/javascript"> $(document).ready(function(){ var c=0; var X=0; for(i=0;i<5;i++) { $("#div1").click(function(e){ var a = e.pageX - this.offsetLeft; var b = e.pageY - this.offsetTop; c=a+b; }) X+=c; $('#div1').animate( {left:X+"px"}, 5000); } }) </script> |
Цикл for(i=0;i<5;i++) не ждёт пока анимация завершится.
Цикл мгновенно отрабатывает 5 раз и заканчивается, animate по сути 5раз получает одну команду, ты даже мышкой пошевелить неуспеваешь. Дальше анимация ползёт сама по себе, ибо она привязана к таймеру. Ей начхать что твоя программа завершилась. Чтобы работало, вместо цикла используй setInterval или лучше setTimeout с периодом 5000. Либо юзай callback [вызов] по завершению анимации, из которого ты будешь запускать новую анимацию. Вот те пример c callBack написанный от балды :) //глобальная переменная X X=0; //обьявим счётчик количества повторений анимаций. i=0; //обработчик события click $("#div1").click(function(e){ //обрати внимание x устанавливается внутри обработчика click а не снаружи. X = e.pageX; // я заремарил твой алгоритм вычисления, ибо не могу понять что он делает //var a = e.pageX - this.offsetLeft; //var b = e.pageY - this.offsetTop; //c=a+b; //X+=c; }) //функция f будет вызываться когда анимация заканчивается, и запускать анимацию вновь, до тех пор пока i<5. f=function(){ // если i <5 тогда запустим анимацию, когда анимация закончится, она вызовет функцию f вновь if (i<5) $('#div1').animate( {left:X+"px"}, 5000,f); // увеличим счётчик i=i+1; } //запустим анимацию f(); В данном примере новая анимация должна начинаться, сразу же как заканчивается старая. Тобиш твой div поползёт от текущей координаты к координате x. |
Это не так, я проверил методом alert; написал alert(c) в событии click и кликнул по элементу. значение "с" - определяется. но не изменяется вне события click. animate получает 5 разных значений при каждой отработке цикла : X+=c (проверял задавая ненулевое значение "с").тут наверно вопрос видимости переменной.переписал скрипт по-другому:
<script type="text/javascript"> var c=0; var X=0; var a=0; var b=0; $(document).ready(function(){ for(i=0;i<5;i++) { $("#div1").click(function(e){ a = e.pageX - this.offsetLeft; b = e.pageY - this.offsetTop; c=a+b; }) X+=c; $('#div1').animate( {left:X+"px"}, 5000); } }) </script> вынес объявление переменных из события ready, она стала типа глобальной или не знаю как правильно тут сказать, но все равно код не работает. |
Я и не говорил что цикл неработает, я говорю что цикл заканчивается быстрее чем анимация хотябы на пиксел сместится. Цикл отдал команду animate и фурычит дальше, а фурычит он быстро. Alert приостанавливает деятельность цикла, а вот animate нефига.
|
Рабочее демо,
песочница на сайте не работает, копируй в файл и пробуй. Цикл в примере сделал бесконечным, а также ввёл Y чтобы демка была нагляднее. <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css"> #div1 { position:absolute; background-color:#abc; left:50px; width:90px; height:90px; margin:5px; } </style> </head> <div id="div1"> </div> <script> //глобальная переменная X X=0; Y=0; //обьявим счётчик количества повторений анимаций. i=0; //обработчик события click $(document).click(function(e){ //обрати внимание x устанавливается внутри обработчика click а не снаружи. X = e.pageX; Y = e.pageY; }) //функция f будет вызываться когда анимация заканчивается, и запускать анимацию вновь, до тех пор пока i<5. f=function(){ // увеличим счётчик // в этом примере цикл у нас бесконечный i=i; // если i <5 тогда запустим анимацию, когда анимация закончится, она вызовет функцию f вновь if (i<5) $('#div1').animate( {left:X+"px",top:Y+"px"}, 500,f); } //запустим анимацию f(); </script> </body> </html> |
спасибо. мне, кстати, бесконечный цикл и нужен для программы:)
|
Часовой пояс GMT +3, время: 18:27. |