Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.10.2011, 17:31
Интересующийся
Отправить личное сообщение для stalker77 Посмотреть профиль Найти все сообщения от stalker77
 
Регистрация: 31.08.2011
Сообщений: 16

обработка клика мыши при анимации
Неправильно работает код. Координата элемента 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>
Ответить с цитированием
  #2 (permalink)  
Старый 30.10.2011, 20:10
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Цикл 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.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 30.10.2011 в 21:09.
Ответить с цитированием
  #3 (permalink)  
Старый 30.10.2011, 20:29
Интересующийся
Отправить личное сообщение для stalker77 Посмотреть профиль Найти все сообщения от stalker77
 
Регистрация: 31.08.2011
Сообщений: 16

Это не так, я проверил методом 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, она стала типа глобальной или не знаю как правильно тут сказать, но все равно код не работает.

Последний раз редактировалось stalker77, 30.10.2011 в 20:34.
Ответить с цитированием
  #4 (permalink)  
Старый 30.10.2011, 21:12
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Я и не говорил что цикл неработает, я говорю что цикл заканчивается быстрее чем анимация хотябы на пиксел сместится. Цикл отдал команду animate и фурычит дальше, а фурычит он быстро. Alert приостанавливает деятельность цикла, а вот animate нефига.
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 30.10.2011 в 21:15.
Ответить с цитированием
  #5 (permalink)  
Старый 30.10.2011, 21:28
Профессор
Отправить личное сообщение для DjDiablo Посмотреть профиль Найти все сообщения от DjDiablo
 
Регистрация: 04.02.2011
Сообщений: 1,815

Рабочее демо,
песочница на сайте не работает, копируй в файл и пробуй.
Цикл в примере сделал бесконечным, а также ввёл 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>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме

Последний раз редактировалось DjDiablo, 30.10.2011 в 21:33.
Ответить с цитированием
  #6 (permalink)  
Старый 30.10.2011, 22:15
Интересующийся
Отправить личное сообщение для stalker77 Посмотреть профиль Найти все сообщения от stalker77
 
Регистрация: 31.08.2011
Сообщений: 16

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Необходима помощь! Остановка карусели при наведении курсора мыши. DAZ jQuery 5 11.05.2018 10:49
Смена картинки (бекграунд дива ) при событии (нажатие клавиш или клавиши и мыши) Monster Events/DOM/Window 5 01.11.2009 01:16
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05
Динамическое изменение размеров блока при наведении мыши! Viktor ------- Общие вопросы Javascript 7 05.05.2009 19:13
FireFox: onmouseover не работает при зажатой кнопке мыши no. Общие вопросы Javascript 4 19.08.2008 13:43