Форум

Nifler · #1 (**permalink**) 25.05.2015, 15:41

Написал я небольшой код, который при перелистовании слайда выталкивает слева слова и подсвечивает соответствующий пункт меню.
вот как работает 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)

ksa · #2 (**permalink**) 25.05.2015, 16:13

Сообщение от 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

Nifler,

Сообщение от Nifler

чтобы след анимация начиналась когда окончится предыдущая.

тогда забыть о setInterval строка 22, и вспомнить о callback строка 16

Nifler · #4 (**permalink**) 31.05.2015, 19:18

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

Nifler,
достаточно первых 8 строк

Nifler · #6 (**permalink**) 31.05.2015, 20:26

а как тогда запустить этот код, чтобы оно поочередно проработало 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

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>

Nifler · #8 (**permalink**) 01.06.2015, 00:34

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

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

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

laimas · #9 (**permalink**) 01.06.2015, 01:55

Сообщение от 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

хоть за кликайтесь

<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>

Форум

Справочник

Discord чат

Курсы javascript