ddimonn8080
@ddimonn8080

Не работает .fadeIn()?

Так работает:
var hiddenButtons = $('.carouselArrowLeft2,.carouselArrowRight2');
	var a = $('.carousHiderWrapper2');
	
	a.hover(function(){
		hiddenButtons.css({'opacity':'1'});
	}, function(){
		hiddenButtons.css({'opacity':'0'});
	});

В css для .carouselArrowLeft2 и .carouselArrowRight2 задано opacity: 0;
Но изначально хотел сделать через .fadeIn(), но не работает так:
var hiddenButtons = $('.carouselArrowLeft2,.carouselArrowRight2');
	var a = $('.carousHiderWrapper2');
	
	a.hover(function(){
		hiddenButtons.fadeIn();
	}, function(){
		hiddenButtons.fadeOut();
	});

В чём ошибка?
  • Вопрос задан
  • 2278 просмотров
Решения вопроса 2
byte916
@byte916
FadeIn и FadeOut скрывают и показывают изменяя display-свойство, при этом, для плавности скрытия и показывания используется opacity от 0 до определённого в css-свойствах (если не определено, то до 1). Таким образом, если вы определили в стиле opacity 0, то изменение будет от 0 до 0, и элемент не будет показан.

В вашем случае нужно в css использовать не opacity 0 а display none
https://jsfiddle.net/gk9v8epc/
Ответ написан
Комментировать
trushka
@trushka
Лучше вообще через CSS сделать - я так понимаю .carouselArrowLeft2,.carouselArrowRight2 находятся внутри .carousHiderWrapper2? Тогда можно просто сделать
.carouselArrowLeft2, .carouselArrowRight2 {
    transition: .3s; opacitiy:0; visibility:hidden
}
.carousHiderWrapper2:hover .carouselArrowLeft2, .carousHiderWrapper2:hover .carouselArrowRight2 {
    opacitiy:1; visibility: visible
}
- и никакого jQuery нинада)) Visibility меняется для совместимости с ИЕ8- - он opacity не понимает
Upd: Для сокращения лучше задать класс стрелочкам типа .carouselArrow2.left (class="carouselArrow2 left") - тогда будет
.carouselArrow2 {transition: .3s; opacitiy:0; visibility:hidden}
.carousHiderWrapper2:hover .carouselArrow2 {opacitiy:1; visibility: visible}

А разные положения и картинки для каждой стрелочки уже задавать с помощью .carouselArrow2.left и .carouselArrow2.right
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
ddimonn8080
@ddimonn8080 Автор вопроса
habrahabr.ru/post/181179
Думаю будет в тему.Здесь про баги .fadeIn() и .fadeOut().
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы