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

Question

[Дмитрий]

Так работает:

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();
	});

В чём ошибка?

Answer 1

[Андрей]

FadeIn и FadeOut скрывают и показывают изменяя display-свойство, при этом, для плавности скрытия и показывания используется opacity от 0 до определённого в css-свойствах (если не определено, то до 1). Таким образом, если вы определили в стиле opacity 0, то изменение будет от 0 до 0, и элемент не будет показан.

В вашем случае нужно в css использовать не opacity 0 а display none
https://jsfiddle.net/gk9v8epc/

Answer 2

[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

Answer 3

[Дмитрий]

habrahabr.ru/post/181179
Думаю будет в тему.Здесь про баги .fadeIn() и .fadeOut().