Проблемы с анимацией
Здравствуйте! Я в js новичок, та ктчо буду очень благодарна, если кто-то мне поможет. У меня есть следующая задачка: Есть картинка, которая положена в div. Этот div в бесконечном цикле сначала поднимается вверх на сотню пикселей, потом 'падает ' вниз на прежнее место. По клику на этот див, где бы он ни был, он должен 'упасть', т.е. вернуться в исходную позицию.
Бесконечное 'карабканье и падение' я сделала так: function goes_up(){ $('#idl').animate({top:'-=180'},40000);//подъем $('#id').animate({top:'+=180'},1000);//падение }; setInterval(goes_up, 100);//бесконечный подъем и падение Но когда я стала добавлять часть с кликом, то возникли проблемы (пыталась сделать через animate, но не вышло). Как мне можно решить эту проблему? |
(function () {
var callee = arguments.callee;
$("#id").animate({
top: "+=180px"
}, 3000, function () {
$(this).animate({
top: "-=180px"
}, 3000, callee);
});
})();
|
Цитата:
Цитата:
|
ну и не упадёт никогда по клику. пока цикл не закончится опросов и других любых действий не будет
|
так ведь нужно,чтобы упала по клику
|
делать движение через таймер.появятся промежутки во времени между вызовами по таймеру в течении которых будет работать опросы мыши и клавы. вобщем момент в том чтобы были промежутки во времени между действиями производимыми по таймеру-может быть ситуация время след выполнения по таймеру уже подошло а пред действие ещё не отработало полностью(зависит от компа клиента).да и зачем библиотеки для этого ?на чистом скрипте с тем же эффектом это всё делается
|
Цитата:
|
можно. повесить всё в цикл простой
|
А вы это пробовали хоть раз сделать? Покажите нам примерчик, пожалуйста.
|
dmitriymar,
Правильно ли я понимаю: Делаем цикл: Подвинем немного, проверим, кликали ли; Если кликали, то уроним элемент; если нет, то подвинем вверх. Так? |
vyazovetskova, зачем вам этот бред? Анимация через цикл не делается. Чем вам мой код не угодил?
|
dmitriymar, чтобы вы не несли чушь про циклы, я покажу вам наглядный пример, как делается такая анимация на чистом JS:
<div id='foo' style='width: 50px; height: 50px; position: absolute; background: #555555'>
</div>
<script type='text/javascript'>
window.onload = function () {
document.getElementById("foo").onclick = function () {
var E = this;
this.onclick = new Function;
(function (toTop, from, to) {
var start = new Date().getTime(),
callee = arguments.callee;
setTimeout(function () {
var progress = (new Date().getTime() - start) / 1000;
E.style.top = ((to - from) * progress + from) + "px";
if (progress < 1)
setTimeout(arguments.callee, 13);
else
callee(!toTop, toTop ? 0 : 180, toTop ? 180 : 0);
}, 13);
})(false, 0, 180);
};
};
</script>
|
момент не в этом. если есть какая работа на сайте-то если во время выполнения её был клик то не будет по нему обработки. привязать к котейнеру обработчик он клик. и вызывать функцию обработки движения по таймеру(движение вверх -вниз)-но при этом следить чтобы были паузы между вызовами функции по таймеру
|
хотя я точно не знаю может обработчик онклик привязанный к контейнеру будет срабатывать во время работы функции по таймеру. но в любом случае когда он роняется таймер нужно оключить.а уронив опять включить
|
exec,
что называть анимацией-какоето движение? так без разницы движение точки будет по таймеру или в цикле зациклено-и то и другое будет называться анимацией!!!или графические изменения с помощью ассемблера или другого языка это не анимация? но в ассемблере для чтения с мыши есть прерывания. а вот js как обрабатывает посторонние действия во время выполнения.если как борландовский с++ или делфи то во время выполнения действий отслеживать не будет. и если это именно эта модель -то стоит по таймеру вызывать функцию смещения всего на пару точек. и так много раз-это в этом случае будет естественным прерыванием на опрос переферии. Ну и наверное если выкладывается код к этой цитате-dmitriymar, чтобы вы не несли чушь про циклы, я покажу вам наглядный пример, как делается такая анимация на чистом JS: то стоит позаботиться о том чтобы он хотябы работал.у меня в FF он не работает!!! |
Цитата:
давайте вы уже попробуете у себя на компьютере зациклить что-нибудь, увидеть повисший браузер вместо анимации и перестанете нести ахинею. |
браузер будет всётаки висеть(значит события с переферии обрабатываться не будут) но точка будет двигаться и это тоже называется анимацией малыш
|
Я так понимаю, до сих пор говорим о своих фантазиях. Тогда рассказываю: когда браузер висит, он ничего не перерисовывает. Без перерисовки нет анимации.
|
браузер как раз висеть не будет в этот момент-он будет выполнять цикл движения точки. а то что браузер не будет реагировать на внешние раздражители-так это говорит только об одном-у него нет естественных прерываний на опрос переферии в случае выполнения какого либо действия малыш!!
|
Kolyaj,
хотя бы читал внимательно что написано а потом коментил-уже не первый раз это вижу от одного и тогоже |
Решение было найден. Спасибо всем, кто помогал разобраться!
|
exec на всякий, поправьте свой пример, он не работает как минимум в firefox))
Внесу свои пять копеек:
<script type="text/javascript">
window.onload = function(){
var elem = document.getElementsByTagName('div')[0], i = l = 30, j = k = 0, s = 100;
document.getElementsByTagName('a')[0].onclick = function(){
if(k!=0) return;
(function(){
if(i<=s){
elem.style.top = ++i +'px'; j = i; k = 1;
}
else {
elem.style.top = --j +'px';
if(j<=l) i = l;
}
window.setTimeout(arguments.callee, 10); return false;
})();
return false;
};
};
</script>
<a href="#">click<a/>
<div style="background: #0095FF; position: absolute; width: 50px; height: 50px"></div>
|
monolithed,
когда много раз кликаеш скорость увеличивается. не только в фаефоксе он не работает-он во всех не работает |
Всё, подправил свой пример. Кстати, при повторном клике скорость не увеличивается.
А теперь выложите-ка свой рабочий код, который делает анимацию через цикл, интересно было бы посмотреть. |
блин да вы все читать умеете в конце концов? прочти внимательно посты от меня!!!хотелось бы глянуть на атестат и убедиться что там помимо русского языка изучалась и литература,а именно то что не только в школе научили писать но и читать.хотя чегото уверен в обратном скорость увеличивается при повторных кликах у monolithed
|
exec,
не точно не преподавали чтение-человек просил чтобы при он клик контейнер ронялся |
monolithed,
точно не роняется а просто скорость увеличивается при нажатии на клик |
dmitriymar, что мешает поменять одно число в коде, отв. за скорость?
|
мешает то, что ни у тебя ни у monolithed не роняет контейнер.
|
Цитата:
Цитата:
|
monolithed,
всё равно не роняется))) |
Цитата:
|
dmitriymar, на
<div id='foo' style='width: 50px; height: 50px; position: absolute; background: #555555'>
</div>
<script type='text/javascript'>
window.onload = function () {
function delta(progress) {
function d(progress) {
for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
if (progress >= (7 - 4 * a) / 11)
return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
}
}
return 1 - d(1 - progress);
}
document.getElementById("foo").onclick = function () {
var E = this;
this.onclick = new Function;
(function (toTop, from, to) {
var start = new Date().getTime(),
callee = arguments.callee;
setTimeout(function () {
var progress = (new Date().getTime() - start) / 1000;
E.style.top = ((to - from) * (toTop ? progress : delta(progress)) + from) + "px";
if (progress < 1)
setTimeout(arguments.callee, 13);
else
callee(!toTop, toTop ? 0 : 180, toTop ? 180 : 0);
}, 13);
})(false, 0, 180);
};
};
</script>
Просто интересно узнать, что опять не так. |
exec,
а сам что не видишь что он клик не реаигирует а принудительно падает с верхней точки .по крайней мере в ff да и в ie-так что по ходу наверное во всех.задача ведь человеком чётко сформулирована)))не переживай уже разобрались с человеком задавшим этот вопрос в личке. |
exec, у меня после пары кликов по кубику firefox вырубило наглухо с сообщением о критической ошибке)))
dmitriymar special for you :D
<script type="text/javascript">
window.onload = function(){
var elem = document.getElementsByTagName('div')[0], i = l = 200, j = k = 0;
elem.onclick = function(){
if(k!=0) {
i = -l;
return false;
}
(function(){
if(i>=k){
elem.style.top = --i +'px'; j = i; k = 1;
}
else {
elem.style.top = ++j +'px';
if(j++>=l) i = l;
}
window.setTimeout(arguments.callee, 10);
})();
return false;
};
};
</script>
<div style="background: #0095FF; position: absolute; width: 50px; height: 50px; top: 200px"></div>
Цитата:
Цитата:
|
monolithed,
от спасибо-аж на сек показалось что у меня сегодня д.р. просто у нас была полемика что такое анимация и что такое зацикленный браузер а что повисший. у меня тож испод того кода ff лёг. ну а проблема была решена несколько часов назад-она всё правильно делала-только нужно было прерываться на опросы чаще и всё(в смысле функции работы по таймеру делать короче и вызывать их чаще чтобы инфу с мыши считывать) |
Цитата:
|
monolithed,
видеш ведь мою карму?интересно к полуночи к -1000 догоню?))) |
Свое решение описала тут: http://vyazovetskova.livejournal.com/15461.html
|
Цитата:
И если вы уж решили кому-то дать масстер-классс, то убедитесь хотя бы сами, что ваш пример работает, я уж не говорю про элементарную демку и хотя бы намек на то что это jQuery (ведь тем кто знает что это - пройдут стороной, но вы рассчитываете на противоположную аудиторию). PS: И был ли смысл вообще делать на jQuery, если тоже самое только рабочее и с меньшим количеством кода можно сделать на чистом JavaScript? |
| Часовой пояс GMT +3, время: 17:46. |