Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.06.2015, 20:25
Интересующийся
Отправить личное сообщение для malevi4 Посмотреть профиль Найти все сообщения от malevi4
 
Регистрация: 23.05.2015
Сообщений: 11

Помогите разобраться с This
Здравствуйте. У меня есть такая задача - при наведении на блок должна включаться анимация (по сути, должно пересчитать 5 картинок подряд).

Я сделал это так: в блок вставил 5 спанов с разными классами и абсолютным позиционированием. Все они спрятаны, но при наведении они по очереди показываются с небольшим интервалом. Получается анимация (код выложу чуть ниже).

Только есть небольшая проблемка, при наведении мыши на элемент, во всех элементах с данным классом начинает меняться фон (что собственно и логично). Как можно сделать так, чтобы фон менялся только у того элемента, на который я навел?

Я думал, это нужно сделать с помощью $(this). Но я могу и ошибаться, так как в ЯС и jquery еще совсем зеленый.

$('.imgWrap').hover(function(){
	$('.image, .image2, .image3, .image4, .image5, .image6').hide();
	$('.image1').show();
	setTimeout(function(){
	$('.image1').hide();
	}, 300);
	setTimeout(function(){
	$('.image2').show();
	}, 300);
	setTimeout(function(){
	$('.image2').hide();
	}, 600);
	setTimeout(function(){
	$('.image3').show();
	}, 600);
	setTimeout(function(){
	$('.image3').hide();
	}, 900);
	setTimeout(function(){
	$('.image4').show();
	}, 900);
	setTimeout(function(){
	$('.image4').hide();
	}, 1200);
	setTimeout(function(){
	$('.image5').show();
	}, 1200);
	

},function(){
	$('.image1, .image2, .image3, .image4, .image5, .image6').hide();
	$('.image').show();
});
Ответить с цитированием
  #2 (permalink)  
Старый 07.06.2015, 20:30
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

Сообщение от malevi4
$('.image, .image2, .image3, .image4, .image5, .image6', this).hide();
Сообщение от malevi4
$('.image1',this).show();
Ответить с цитированием
  #3 (permalink)  
Старый 07.06.2015, 20:37
Интересующийся
Отправить личное сообщение для malevi4 Посмотреть профиль Найти все сообщения от malevi4
 
Регистрация: 23.05.2015
Сообщений: 11

рони,
уже так делал, но все ровно при наведении во всех блоках .imgWrap меняются картинки
Ответить с цитированием
  #4 (permalink)  
Старый 07.06.2015, 20:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

malevi4,
сделайте минимальный макет хотя бы с двумя блоками
Ответить с цитированием
  #5 (permalink)  
Старый 07.06.2015, 20:43
Интересующийся
Отправить личное сообщение для malevi4 Посмотреть профиль Найти все сообщения от malevi4
 
Регистрация: 23.05.2015
Сообщений: 11

рони,
у меня пока два блока и стоит

Вот так сейчас код выглядит:

$('.imgWrap, this').hover(function(){
	$('.image, .image2, .image3, .image4, .image5, .image6, this').hide();
	$('.image1,this').show();
	setTimeout(function(){
	$('.image1,this').hide();
	}, 300);
	setTimeout(function(){
	$('.image2,this').show();
	}, 300);
	setTimeout(function(){
	$('.image2,this').hide();
	}, 600);
	setTimeout(function(){
	$('.image3,this').show();
	}, 600);
	setTimeout(function(){
	$('.image3,this').hide();
	}, 900);
	setTimeout(function(){
	$('.image4,this').show();
	}, 900);
	setTimeout(function(){
	$('.image4,this').hide();
	}, 1200);
	setTimeout(function(){
	$('.image5,this').show();
	}, 1200);
	

},function(){
	$('.image1, .image2, .image3, .image4, .image5, .image6, this').hide();
	$('.image,this').show();
});

Последний раз редактировалось malevi4, 07.06.2015 в 20:49.
Ответить с цитированием
  #6 (permalink)  
Старый 07.06.2015, 21:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

malevi4,
вы неправильно добавили посмотрите на пример во 2 посте
Ответить с цитированием
  #7 (permalink)  
Старый 07.06.2015, 21:20
Интересующийся
Отправить личное сообщение для malevi4 Посмотреть профиль Найти все сообщения от malevi4
 
Регистрация: 23.05.2015
Сообщений: 11

рони,
Все работает. Спасибо большое

Последний раз редактировалось malevi4, 07.06.2015 в 21:24.
Ответить с цитированием
  #8 (permalink)  
Старый 07.06.2015, 21:36
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

malevi4,
на всякий случай
Поочередность анимаций
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
помогите разобраться с this uroboros7 jQuery 4 02.01.2015 00:56
Помогите разобраться с калькулятором Maksim858 Ваши сайты и скрипты 1 27.12.2014 13:23
Получение ответа сервера через iframe и xhr. Помогите разобраться. Arconas AJAX и COMET 0 26.02.2013 10:38
Помогите пожалуйста разобраться Kupu4 Ваши сайты и скрипты 0 21.01.2010 10:44
Помогите разобраться с галереей IMAGIN yana_studio Общие вопросы Javascript 4 12.12.2009 17:24