Поочередность анимаций
Написал я небольшой код, который при перелистовании слайда выталкивает слева слова и подсвечивает соответствующий пункт меню.
вот как работает http://poli.molodost-dolgoletie.com но проблема следующая: оно не всегда равномерно выталкивает слова. То по одному, то по два.. магия не иначе. как задать поочередность анимации для разных элементов, чтобы след анимация начиналась когда окончится предыдущая. вот код
(function($,andefined){
$(document).ready(function(){
$("#mitka").css("margin-left","0");
function newSlide(){
for (var i=1; i<10; i++){
var margin=$("#mitka").css("margin-left");
if($(".slides>li:nth-child("+i+")").css("display")=="list-item"){
if(i+"px"!=margin){
$("#mitka").css("margin-left",i);
$('.slides>li:nth-child('+i+')>article>div>ul>li').css("margin-left","-500px");
var nth=i;
var j=1;
function leftText(){
$('ul.slides>li:nth-child('+nth+')>article>div>ul>li:nth-child('+j+')').animate({
'margin-left':'0px'
},'slow');
if(j==12){
//clearInterval(timerId);
}
}
timerId = setInterval(function(){leftText(); j++}, 200)
$(".li_slyde").removeClass("li_slyde");
var nextI=i+1;
$(".uk-navbar-nav>li:nth-child("+nextI+")").addClass("li_slyde");
}
}else{
}
}
}
setInterval(newSlide, 200);
})
})(jQuery)
|
Цитата:
Цитата:
|
Nifler,
Цитата:
|
function clAlert(name, callback){
$('#id'+i).animate({
'margin-left':'50px'},200,function(){
callback();
}
)
}
var i=0;
$("#alert").click(function(){
clAlert(i++,function(){
clAlert(i++,function(){
clAlert(i++,function(){
clAlert(i++,function(){
clAlert(i++,function(){
clAlert(i++,function(){
clAlert(i++,function(){
clAlert(i++,function(){
clAlert(i++,function(){
clAlert(i++,function(){
clAlert(i++,function(){
clAlert(i++,function(){
});
});
});
});
});
});
});
});
});
});
});
})
})
что-то такое? ато не придумал как это в цикле запустить. вот как работает: http://molodost-dolgoletie.com/podolian/lab4/js/ нажмите на красный квадрат чтобы запустить |
Nifler,
достаточно первых 8 строк |
а как тогда запустить этот код, чтобы оно поочередно проработало 12 раз подряд при клике? не буду вставлять все варианты которые перепробовал, но все они каким-то образом напоминали вот этот:
function clAlert(name, callback){
$('#id'+i).animate({
'margin-left':'50px'},200,function(){
callback();
}
)
}
var i=0;
$("#alert").click(function(){
clAlert(i++,clAlert);
})
я пытался воспользоваться рекурсией получился пшик. |
Nifler,
:) мысли вслух активному слайду возможно добавляется класс -- тогда можно решить всё при помощи css через transition-delay - код ниже просто вариант на тему
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
#alert ~ p {
width: 100px;
height: 30px;
background: #ccc;
}
</style>
</head>
<body >
<div id="alert"></div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<script>
(function () {
var div_len = document.querySelectorAll("#alert ~ p");
var i = 0;
(function foo(a) {
var counter = 5,
pixeles = 0,
time = setInterval(function () {
div_len[a].style.transform = 'translateX('+pixeles+'px)'
div_len[a].style.WebkitTransform = 'translateX('+pixeles+'px)'
div_len[a].style.WebkitTransform = 'translateX('+pixeles+'px)'
div_len[a].style.WebkitTransform = 'translateX('+pixeles+'px)'
if(pixeles >= 50) {
clearInterval(time);
i++;
if (i < div_len.length)foo(i)
}
pixeles+=counter;
}, 10)
})(i);
}());
</script>
</body>
</html>
|
не, там только display изменяется. и у меня уже почти работает нормально. почти. осталась еще грамулька магии. почемуто идет задержка после вывода первой строки когда слайды назад листать.
http://poli.molodost-dolgoletie.com/ исправил добавив в начало пустой li и оно просто все выводит с небольшой задержкой и все выглядит нормально. ппц, неужели это только у меня такое?? почему я так жестоко ненавижу и не понимаю js и в тоже время так хорошо понимаю и люблю php. что за бред то такой... |
Цитата:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
$('#alert').click(function(){
$('p').not('[style]').first().animate({
'margin-left':'50px'},200)
})
});
</script>
</head>
<div id="alert">CLICK</div>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
</body>
</html>
|
:) хоть за кликайтесь
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function() {
function foo()
{
var a = $('p.test:first');
a.length && a.animate({'margin-left':'50px'},200, foo) && a.removeClass('test')
}
$('#alert').click(function(){
$('p').stop().addClass('test').css({'margin-left':'0px'});
foo();
})
});
</script>
</head>
<div id="alert">CLICK</div>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
</body>
</html>
|
| Часовой пояс GMT +3, время: 09:26. |