Не правильное выполнение анимации?

Question

[Анна Бакурова]

Добрый день, дорогие форумчане. Столкнулась со след. проблемой.
Прописала код:
$('.share').hover(

function(){
			widthBS = $('.share-block').width();
			$('.share-block span').css({
				display: 'none'
			});
			$('.share-block').css({
				width: widthBS
			});

			$('.share-block').animate({
				width: $('.share-icon').width()
			}, 100, function(){
					$('.share-icon').css({display: 'block'});
				}
			);
		},
		function(){
			widthBSt = $('.share-block').width();
			$('.share-icon').css({
				display: 'none'
			});
			$('.share-block').css({
				width: widthBSt
			});

			$('.share-block').animate({
				width: widthBS
			}, 100, function(){
					$('.share-block span').css({
						display: 'block'
					});
				}
			);
		});

Всё бы ничего, но функции которые должы выполняться в конце анимации выполняются через заданное время (100мс) а сама анимация дольше (понять почему не могу) вот сайт там белая кнопка share и при наведении на неё вылезает этот косяк (сначала оно немного движется 100мс потом происходит disp block а потом раскрывается полностью) в чём проблема?

Answer 1

[rsludge]

У вас там transition на 0.5 секунды установлен, думаю, все из-за этого.

Comments

[Анна Бакурова]

Просто чудо! Благодарю! А Я то думала...

Answer 2

[Виталий Киренков]

Да, если transition отключить, то работает правильнее. Только я вот не понимаю к чему вообще использование js ? Нужно чтобы иконки не скакали? так задайте им inline-block, а родителю white-space: nowrap; Ну и по ховеру спан прятать, ul показывать... Чистый ксс...

Comments

[Анна Бакурова]

Я позже буду обработчик на клик ставить при определённом разрешении так как на телефонах ховер сложно исполнить (короче ховер в данном случае не для телефонов)

[Виталий Киренков]

Если вам, тач устройства важны, то используйте плагин modernizr, он довешивает определённые классы, и если устройство тач, то для него опять же можно указать другие стили и всё будет работать одними стилями... Но если вам просто лень делать правильно, то оставляйте как у вас есть.

[Анна Бакурова]

постараюсь тогда сделать через css и подключить modernizr. Если что то пойдёт не так то спрошу)