Анимация переходов на Hover (jQuery)

-2

Я jQuery noob, но я пытаюсь понять, как создать анимированный переход заголовка.Анимация переходов на Hover (jQuery)

Я нашел этот CodePen (http://codepen.io/ansac/pen/BHtkE), но это не совсем то, чего я пытаюсь достичь. Мой вопрос в том, как я могу оставить фон на hover как есть, но оживить текст, который появляется посередине. Мне было бы очень интересно, как его анимировать по горизонтали (так, чтобы он начинался с левого/правого и останавливался в данном положении (в центре)) или вертикально (сверху/снизу) до центра.

Спасибо!

источник

2013-06-26 user2451472

Этот вопрос не соответствует теме, потому что он просит других написать код для вас. Пожалуйста, сделайте попытку самостоятельно, а затем вернитесь с более конкретным вопросом. –

Это может быть правдой, но поскольку мои знания в Javascript равны нулю (и у меня нет начальной точки), я искал решение, которое кто-то мог бы уже достичь. – user2451472

Я действительно пытался возиться немного со ссылкой прикрепленному. Анимация, скорее всего, будет работать, но вам придется возиться со своими настройками CSS и позициями, чтобы найти правильное размещение и настройку (если вы используете кодировку, похожую на эту страницу). Проверьте это ниже и убедитесь, что это то, что вы ищете.

Примечание: В CSS я изменил text-align для hovertext на LEFT, а не CENTER, и добавил параметры анимации для jQuery.

http://codepen.io/anon/pen/jxlHm

Я вроде в одной лодке, как вы, обучение JQuery/JavaScript, как я иду, а просто поиск хороших книг/сайтов, чтобы помочь вам в этом. Сайт jQuery довольно приличный, чтобы начать хороший старт, так как я начал искать там.

источник

2013-06-26 15:40:53

Эй, это именно то, что я искал! Я начал копаться в функции .animate(), как было предложено выше, но пока не достиг успеха. Большое спасибо за ваше решение, но есть небольшая проблема, с которой я все еще сталкиваюсь - на самом деле для получения текста требуется полсекунды. И это не скорость, установленная для fadeIn, скорее всего, это время, когда текст достигает границы «0 пикселей», где начинается само изображение. Я немного заглянул в нее и уменьшил маржу слева до самой оптимальной (-80px) и установил скорость как 150 мс - я все еще могу заметить эту «паузу». Спасибо большое! – user2451472

Нет проблем! Я не в том месте, где я могу смотреть дальше, но рад, что вы на правильном пути. –

-2

вы можете просто посмотреть метод Jquery Animate, например, http://www.w3schools.com/jquery/jquery_animate.asp

источник

2013-06-26 15:02:02

Не совсем неправильно, но на самом деле не ответ. И я действительно предлагаю ссылку на собственную документацию jQuery вместо w3schools. –

Вы имеете в виду документацию jQuery.com? –

http://api.jquery.com/animate/ –

Анимация переходов на Hover (jQuery)

ответ

Смежные вопросы