Кроссбраузерная цикличность...
Здравствуйте, казалось бы легкий вопрос, но...
Как правильно реализовать цикличность вызова функции, события и т.п с помощью скажем setInterval, setTimeOut, everyTime (Jquery.timers.js) и т.д.? Вроде все просто, пишем код, к примеру:
<script type="text/javascript">
function b_move(){
var visB = $(".b_sup:visible");
var nextB = visB.next();
$(".b_sup").fadeOut(1000);
if(visB.length==0||nextB.length==0)
$(".b_sup:first").delay(1000).fadeIn(500);
else nextB.delay(1000).fadeIn(500);
}
$(document).everyTime(7500,'tmr_b', b_move);
</script>
<span class="b_sup" ><img src="blalbalba" /></span> <span class="b_sup" style="display:none"><img src="blalbalba" /></span> <span class="b_sup" style="display:none"><img src="blalbalba" /></span> <span class="b_sup" style="display:none"><img src="blalbalba" /></span> <span class="b_sup" style="display:none"><img src="blalbalba" /></span> Идея, поочередная смена картинок... В IE, к примеру, все работает.... но откроем страницу в браузере Chrome, и при условии ухода на некоторое время на другую вкладку и возвращению обратно, сможем видеть быструю смену картинок (как будто скрипт отрабатывает те итерации что мы пропустили за время нашего отсутствия) затем все возвращается на круги своя... |
Тесты(запустите и погуляйте по вкладкам):
<html>
<body>
<script>
time=0;
(function check(){
document.body.appendChild(document.createTextNode(-time+(time=new Date().getTime())+' | '));
setTimeout(check,200)
})()
</script>
</body>
</html>
<html>
<body>
<script>
time=0;
setInterval(function(){
document.body.appendChild(document.createTextNode(-time+(time=new Date().getTime())+' | '));
},200)
</script>
</body>
</html>
|
<html>
<body>
<script>
function b_move(){
var visB = $(".sup:visible");
var nextB = visB.next();
$(".sup:visible").fadeOut(1000);
if(visB.length==0||nextB.length==0)
$(".sup:first").delay(1000).fadeIn(500);
else nextB.delay(1000).fadeIn(500);
setTimeout(b_move,5000);
}
b_move();
</script>
<div id="modul" style="height:100px;">
<span class="sup" style="display:none"> 1 </span>
<span class="sup" style="display:none"> 2 </span>
<span class="sup" style="display:none"> 3 </span>
<span class="sup" style="display:none"> 4 </span>
<span class="sup" > 5 </span>
<span class="sup" style="display:none"> 6 </span>
</div>
</body>
</html>
Спасибо за ответ! Вот, по аналогии с вашим кодом (первый вариант)... глюки, к сожалению, в наличии... Может дело в другом... таймер таймером, а вот fadeIn, fadeout отрабатываю неккоректно... за один цикл должны отработать один раз... а при уходе с вкладки и последующем возвращении отрабатываю по количеству пропущенных циклов ;( |
202 | 202 | 201 | 201 | 1001 | 1000 | 1000 | 841 | 201 | 202 | 201 | 202 | 201 | 202 | 201 | 202 | 201 | 201 | 201 | 201 | 201 | 202 | 201 | 201 | 202 | 295 | 213 | 201 | 1001 | 1000 | 1001 | 1001 | 200 | 201 | 201 | 201 | 201 | 202 | 201 | 201 | 202 | 201 | 202 | 201 | 201 | 202 | 201 | 201 | 1002 | 1001 | 1001 | 372 | 202 | 201 | 200 | 202 | 202 | 202 | 202 | 202 |
Кстати, что выдает Хром (выделено жирным) когда вкладка закрыта... |
ап
|
юзай .animate() и все проблемы уйдут
|
тогда появиться другая проблема...
$(".class").animate({blablabla},5000);
Как зациклить, при условии что количество объектов .class > 1? |
тема еще актуальна!
|
$(".class").each( function(index, el) { $(el).animate({blablabla} },5000);
|
| Часовой пояс GMT +3, время: 09:17. |