07.06.2015, 20:25
|
Интересующийся
|
|
Регистрация: 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();
});
|
|
07.06.2015, 20:30
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
Сообщение от malevi4
|
$('.image, .image2, .image3, .image4, .image5, .image6', this).hide();
|
Сообщение от malevi4
|
$('.image1',this).show();
|
|
|
07.06.2015, 20:37
|
Интересующийся
|
|
Регистрация: 23.05.2015
Сообщений: 11
|
|
рони,
уже так делал, но все ровно при наведении во всех блоках .imgWrap меняются картинки
|
|
07.06.2015, 20:38
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
malevi4,
сделайте минимальный макет хотя бы с двумя блоками
|
|
07.06.2015, 20:43
|
Интересующийся
|
|
Регистрация: 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.
|
|
07.06.2015, 21:13
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
malevi4,
вы неправильно добавили посмотрите на пример во 2 посте
|
|
07.06.2015, 21:20
|
Интересующийся
|
|
Регистрация: 23.05.2015
Сообщений: 11
|
|
рони,
Все работает. Спасибо большое
Последний раз редактировалось malevi4, 07.06.2015 в 21:24.
|
|
07.06.2015, 21:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
malevi4,
на всякий случай
Поочередность анимаций
|
|
|
|