Jquery функционал Ошибка

Question

У меня проблема с функцией jquery.Я хочу, чтобы заголовок не пропадал на полсекунды, пока посетитель наводит указатель мыши на фоновое изображение заголовка.

http://www.kidsartvalley.com/

Вот домашняя страница, где вы поймете, чтоиногда, когда вы сосредотачиваетесь на мультфильме ребенка, он говорит «привет», но иногда он становится невидимым на очень короткий момент.Я хочу, чтобы он не скрывался при наведении на него указателя мыши.

Answer 1

Это не относится к jQuery, в основном.

Вместо использования другого изображения для наведенного состояния используйте изображение спрайта и измените положение фона с помощью jQuery, что позволит осуществлять плавный переход между двумя изображениями.

http://css -tricks.com / 158-css-sprites /

Answer 2

Я думаю, вам нужно предварительно загрузить версию: hover изображения в начале вашего javascript, чтобы он уже кэшировался при возникновении события hover.

var img = new Image();
img.src = "http://www.kidsartvalley.com/images/child-head-hover.png";

Answer 3

Это не проблема jQuery.

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

У вас есть два основных варианта:

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

2. Используйте одно изображение, содержащее как обычное изображение, так и изображение при наведении, это называется sprite . Таким образом, будет загружено полное изображение, и вы больше не столкнетесь с этой проблемой. Затем вам нужно изменить положение фона, чтобы отобразить другое изображение. Вы можете сделать это, создав другой класс в ваших правилах CSS с разными координатами положения фона. В JS этот класс нужно назначать только тогда, когда мышь находится над заголовком и отображает его.

Если вы не хотите делать это вручную, есть также онлайн-инструменты, которые могут сделать работу за вас. Обычно использование этих инструментов не рекомендуется, но я думаю, что для двух изображений одинакового размера все в порядке.