Почему не работает код на jQuery?

Question

[Stels007]

Здравствуйте! Помогите разобраться. К сожалению, в проект, где возникла данная проблема скинуть не могу, он слишком большой и ресурсы разбросаны, но суть такова: я добавляю к элементу новый класс и задаю ему анимацию. Анимация работает, т.е. она меняет позицию картинки, но не осуществляет заданной задержки времени.

$("#bg1").parent().addClass("bg3").stop().animate({backgroundPosition:"(0 0)"},200);

Просто моментально меняется позиция не выполняя задержку в 200 млс! Прошу помощи, может кто сталкивался?

P.S.
Попробую более наглядно пояснить, что я пытаюсь сделать.

<div id="menuWrapper" class="menuWrapper bg1">
  	<ul class="menu" id="menu">
  		<li class="bg1" style="background-position:0 0;">
  			<a id="bg1" href="#">Our Passion</a>
  			<ul class="sub1" style="background-position:0 0;">
  				<li><a href="#">Submenu 1</a></li>
  				<li><a href="#">Submenu 2</a></li>
  				<li><a href="#">Submenu 3</a></li>
  			</ul>
  		</li>
  		<li class="bg1" style="background-position:-266px 0px;">
  			<a id="bg2" href="#">Our Brands</a>
  			<ul class="sub2" style="background-position:-266px 0;">
  				<li><a href="#">Submenu 1</a></li>
  				<li><a href="#">Submenu 2</a></li>
  				<li><a href="#">Submenu 3</a></li>
  			</ul>
  		</li>
  		<li class="last bg1" style="background-position:-532px 0px;">
  			<a id="bg3" href="#">Contact</a>
  			<ul class="sub3" style="background-position:-266px 0;">
  				<li><a href="#">Submenu 1</a></li>
  				<li><a href="#">Submenu 2</a></li>
  				<li><a href="#">Submenu 3</a></li>
  			</ul>
  		</li>
  	</ul>
  </div>

.bg1{
    background-image: url(images/1.jpg);
}
.bg2{
    background-image: url(images/2.jpg);
}
.bg3{
    background-image: url(images/3.jpg);
}

Собственно, вот. Мне приходится под #bg1 #bg2 и #bg3 подставлять .bg1 .bg2 и .bg3 соответственно. Картинка заменятся да, но мне нужно чтобы она аннимированно заменялась, а не моментально! И не понятно почему картинка то меняется, а duration: 200 не хочет работать?

Answer 1

[Alexander]

Так 200 у вас - это duration, продолжительность анимации, а не задержка.

Попробуйте добавить метод delay:

$("#bg1").parent().addClass("bg3").stop().delay(1000).animate({backgroundPosition:"(0 0)"},200);

(не спец в методах jquery, может его надо добавить после .stop())

UPD: самофикс, да, надо после .stop(). Сделал пример.

Comments

[Stels007]

Да, я не правильно выразился, именно duration нужен. Посмотрите, пожалуйста, еще раз на мой вопрос я внес коррективы и пояснил)

Answer 2

[Exploding]

Если Вы добавляете класс к элементу, зачем же юзать jq animate?? В css всю анимацию и задержки вынесите, а в jq оставьте только toggleClass да и все

Comments

[Stels007]

А Вы не могли бы еще раз посмотреть в раздел моего вопроса, я добавил информации, может так будет более осмысленно. Я не понимаю вот эту избирательность работы кода той выше описанной строчки. Картинка заменяется, но моментально. Может подскажите что-нибудь в этом)) Заранее большое спасибо!

[Exploding]

Stels007: Вы поняли что я писал в первом сообщении или нет? Вы класс добавляете при клике или ховере?
Если при ховере, то js тут вообще не надо

[Stels007]

Честно признаюсь я понял о чем Вы говорите, но не понял как конкретно это реализовать, в частности toggleClass. А сам класс свой я добавляю вот как:

jQuery(document).ready(function() {
$("#bg3").mouseover(function(event) {
  
  $("#bg1").parent().addClass("bg3").stop().animate({backgroundPosition:"(0 0)"},200);
  $("#bg2").parent().addClass("bg3").stop().animate({backgroundPosition:"(-266 0)"},300);
  $("#bg3").parent().addClass("bg3").stop().animate({backgroundPosition:"(-532 0)"},400);

})

В конечном итоге было бы здорово хотя бы и через css решить мою задачу, но также хотелось бы разобраться почему не работает duration, хотя до него код работает, потому как я новичок в jq и пытаюсь не просто решить конкретную задачу, а досконально понять что и как там происходит)

[Exploding]

Stels007: Ну так а чего ж не откроете документацию по jq? Там же все расписано полностью.
ТогглКласс это метод, который переключает класс(-ы) у элемента и ещё там у него три варианта реализации. Т.е. он выполняет аддкласс или ремувкласс в зависимости от того что сейчас у элемента.
А анимация по сути в jq это пережиток прошлого. С появлением css3 анимацию лучше делать в css. И больше свободы действий и работает гораздо качественней чем jq. Ведь анимация в jq это по сути костыли с положением, и размерами элемента. Т.е. как таковой анимации и нет то по сути. Только бешенная нагрузка на процессор, для вычисления промежуточных размеров (кадров).
А в css уже совершенно другое дело

[Exploding]

Stels007: Вы не поняли. Не нужно использовать jq для того чтобы изменить css свойства элемента.
Всю анимацию выполнять в чистом css! В файле где стили у вас типа style.css например

[Stels007]

Exploding: У меня все же получилось сделать так, что оно работает. Кстати, как Вы предлагаете сделать в этом проекте невозможно или я в упор не представляю. Попытаюсь объяснить почему нельзя: я не могу внести в css файл все параметры одного класса, т.к. в html в разных блока и нужно использовать, в зависимости от обстоятельства, разные параметры, они динамически меняются)) Ну не суть)) Так вот. Я сделал что оно анимировано про помощи css, но оно как бы плавно проявляется, а мне нужно, чтобы выезжало. Вообще вот по мотивам этой приблуды я пытаюсь воссоздать этот сайт: https://tympanus.net/codrops/2010/05/05/beautiful-...
И вот мне нужно, чтобы именно выезжало)))

[Exploding]

Stels007: Ну... заводить полемику о css не то время...))
Конкретно по Вашему вопросу:
Вот код оригинальный. Перепроверьте все как тут и как у Вас. Я спать пойду т.к. вторые сутки - с ног валюсь. А если не получится - пишите, да завтра гляну если что

<script type="text/javascript">
            $(function() {
                /* position of the <li> that is currently shown */
                var current = 0;
				
				var loaded  = 0;
				for(var i = 1; i <4; ++i)
					$('<img />').load(function(){
						++loaded;
						if(loaded == 3){
							$('#bg1,#bg2,#bg3').mouseover(function(e){
								
								var $this = $(this);
								/* if we hover the current one, then don't do anything */
								if($this.parent().index() == current)
									return;

								/* item is bg1 or bg2 or bg3, depending where we are hovering */
								var item = e.target.id;

								/*
								this is the sub menu overlay. Let's hide the current one
								if we hover the first <li> or if we come from the last one,
								then the overlay should move left -> right,
								otherwise right->left
								 */
								if(item == 'bg1' || current == 2)
									$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){
										$(this).find('li').hide();
									});
								else
									$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){
										$(this).find('li').hide();
									});

								if(item == 'bg1' || current == 2){
									/* if we hover the first <li> or if we come from the last one, then the images should move left -> right */
									$('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
									move(1,item);
								}
								else{
									/* if we hover the first <li> or if we come from the last one, then the images should move right -> left */
									$('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item);
									move(0,item);
								}

								/*
								We want that if we go from the first one to the last one (without hovering the middle one),
								or from the last one to the first one, the middle menu's overlay should also slide, either
								from left to right or right to left.
								 */
								if(current == 2 && item == 'bg1'){
									$('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300);
								}
								if(current == 0 && item == 'bg3'){
									$('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(266px 0)"},300);
								}

								
								/* change the current element */
								current = $this.parent().index();
								
								/* let's make the overlay of the current one appear */
							   
								$('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){
									$(this).find('li').fadeIn();
								});
							});
						}	
					}).attr('src', 'images/'+i+'.jpg');
				
							
                /*
                dir:1 - move left->right
                dir:0 - move right->left
                 */
                function move(dir,item){
                    if(dir){
                        $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200);
                        $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
                        $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){
                            $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
                        });
                    }
                    else{
                        $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){
                            $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item);
                        });
                        $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300);
                        $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},200);
                    }
                }
            });
        </script>

[Stels007]

Exploding: Здравствуйте) Оригинальный код хорошо, но я, к сожалению, не понимаю его. В смысле я понимаю, что делает каждая строчка, но в целом как все же ему удается работать понимания нет, не доходит. Поэтому я разбираю принципы работы анимации этого сайта пытаюсь "своими словами" реализовать их. Основную часть мне удалось осуществить, но осталась завершающая стадия, вот собственно с ней, я вместе с Вами и борюсь. И да, я стал реализовывать этот завершающий эффект на css3. Но возникла проблема, он толи не дорабатывает, толи не работает совсем. Разрешите Вам скинуть мой проект с комментариями и указанием точного проблемного места, дабы разобраться с этой вещью) Можно ли это сделать по средствам этого форума или лучше на ящик?

[Exploding]

Stels007: лучше на почту, но я уже только завтра смогу посмотреть. Сон проклятый одолевает. Зачем придумали спать...

[Stels007]

Exploding: Я отправил Вам архив с проектом с адреса [e-mail]. Там в html файледал комментрий ситуации сложившейся. Благодарю Вас за помощь)

[Stels007]

Exploding: Вот пришло мне оповещение, что письмо Вам не может быть доставлено. 2 раза пробовал.

[Exploding]

Stels007: ну хз, закиньте на гуглдиск и откройте мне доступ на папку... Или на файлообменник выложите архив запароленый.

[Stels007]

Exploding: Вот гугл диск. https://drive.google.com/file/d/0B3OED723ntu7dE45d...

[Exploding]

Stels007: ок. Сегодня посмотрю обязательно

[Stels007]

Exploding, Да в общем не к спеху, как сможете так и посмотрите))))

[Exploding]

Stels007, извините за задержку... Я смотрел то, что пришло, но я что-то позабыл какова сейчас стоит задача? Только в меню, чтобы выезжало или ещё что-то?

[Stels007]

Exploding, Ничего страшного)))) Там в html файле я дал комментарии, что меня беспокоит. В общем я хочу сделать выезжающие фоновые картинки как здесь: https://tympanus.net/Tutorials/BeautifulBackground...

У меня она как бы появляется, но как видите эффект не такой как в примере. Я просто хочу при помощи css3 добиться в такой же вещи.