Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.05.2015, 15:41
Аспирант
Отправить личное сообщение для Nifler Посмотреть профиль Найти все сообщения от Nifler
 
Регистрация: 29.09.2013
Сообщений: 37

Поочередность анимаций
Написал я небольшой код, который при перелистовании слайда выталкивает слева слова и подсвечивает соответствующий пункт меню.
вот как работает 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)
Ответить с цитированием
  #2 (permalink)  
Старый 25.05.2015, 16:13
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Nifler
как задать поочередность анимации для разных элементов, чтобы след анимация начиналась когда окончится предыдущая.
Как вариант...
Цитата:
$("#my-div-1").animate({height: "hide"}, 1000, function(){
    $("#my-div-2").animate({height: "show"}, 1000);
});
http://ru.stackoverflow.com/question...ементов
Ответить с цитированием
  #3 (permalink)  
Старый 25.05.2015, 16:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Nifler,
Сообщение от Nifler
чтобы след анимация начиналась когда окончится предыдущая.
тогда забыть о setInterval строка 22, и вспомнить о callback строка 16
Ответить с цитированием
  #4 (permalink)  
Старый 31.05.2015, 19:18
Аспирант
Отправить личное сообщение для Nifler Посмотреть профиль Найти все сообщения от Nifler
 
Регистрация: 29.09.2013
Сообщений: 37

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/

нажмите на красный квадрат чтобы запустить
Ответить с цитированием
  #5 (permalink)  
Старый 31.05.2015, 20:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Nifler,
достаточно первых 8 строк
Ответить с цитированием
  #6 (permalink)  
Старый 31.05.2015, 20:26
Аспирант
Отправить личное сообщение для Nifler Посмотреть профиль Найти все сообщения от Nifler
 
Регистрация: 29.09.2013
Сообщений: 37

а как тогда запустить этот код, чтобы оно поочередно проработало 12 раз подряд при клике? не буду вставлять все варианты которые перепробовал, но все они каким-то образом напоминали вот этот:
function clAlert(name, callback){
			$('#id'+i).animate({
				'margin-left':'50px'},200,function(){
					callback();
				}
			)			
		}
		var i=0;
		$("#alert").click(function(){
			clAlert(i++,clAlert);
		})

я пытался воспользоваться рекурсией получился пшик.
Ответить с цитированием
  #7 (permalink)  
Старый 31.05.2015, 22:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #8 (permalink)  
Старый 01.06.2015, 00:34
Аспирант
Отправить личное сообщение для Nifler Посмотреть профиль Найти все сообщения от Nifler
 
Регистрация: 29.09.2013
Сообщений: 37

не, там только display изменяется. и у меня уже почти работает нормально. почти. осталась еще грамулька магии. почемуто идет задержка после вывода первой строки когда слайды назад листать.
http://poli.molodost-dolgoletie.com/

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


ппц, неужели это только у меня такое?? почему я так жестоко ненавижу и не понимаю js и в тоже время так хорошо понимаю и люблю php. что за бред то такой...

Последний раз редактировалось Nifler, 01.06.2015 в 00:42.
Ответить с цитированием
  #9 (permalink)  
Старый 01.06.2015, 01:55
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Nifler
вот как работает: http://molodost-dolgoletie.com/podolian/lab4/js/ нажмите на красный квадрат чтобы запустить
Ну если надо так, то можно так:
<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>
Ответить с цитированием
  #10 (permalink)  
Старый 01.06.2015, 10:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

хоть за кликайтесь
<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>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Виды веб анимаций soltx Элементы интерфейса 2 09.05.2015 18:15
Можно ли в dojo/fx::chain() изменять (добавлять, удалять) массив анимаций? den_zm Dojo toolkit 0 19.04.2013 15:46
анимацию изображения с подсчетом количества анимаций flasher167 Общие вопросы Javascript 12 18.04.2013 21:45
Вызов двух анимаций одним кликом Igorbek Общие вопросы Javascript 5 29.07.2012 23:37
Как очистить очередь анимаций Mazai jQuery 4 14.05.2012 11:02