моя функция анимации jquery не работает - PullRequest
Новая
       23

моя функция анимации jquery не работает

0 голосов
/ 03 февраля 2012

Когда пользователь наводит курсор на кнопку, я пытаюсь изменить изображение стрелки кнопки с помощью функции jquery animate, но она не работает.Вот мой код и это мой сценарий.

$('.Button').mouseenter(function(){  
   $('.arrow-image').animate({  
       'background-image':'url(images/sp-images.png)',  
       'background-repeat':'no-repeat', 
       'background-position':'-85px -0px'
    },5000);  
});

Ответы [ 4 ]

1 голос
/ 03 февраля 2012

Надеюсь, этот кусок кода будет полезен.Я знаю, что вы использовали фоновое изображение для какой-то цели, но я пытался заставить все работать так, как ожидалось, другим способом.:) вот моя попытка сделать стрелку анимированной!

Сделано одно изменение - скорее используя фоновое изображение, я использовал тег img.

проверьте это здесь: http://jsfiddle.net/ylokesh/HvdZP/1/

0 голосов
/ 03 февраля 2012

XepterX прав: http://jsfiddle.net/YSGYz/7/

0 голосов
/ 03 февраля 2012

Из документации jQuery для .animate():

Свойства и значения анимации Все анимированные свойства должны быть анимируется в одно числовое значение, за исключением случаев, указанных ниже; самый не числовые свойства не могут быть анимированы с использованием базового jQuery функциональность (например, ширина, высота или слева могут быть анимированы, но Цвет фона не может быть, если не используется плагин jQuery.Color ()). Значения свойств рассматриваются как количество пикселей, если не указано иное. указано. Единицы измерения em и% могут быть указаны, где это применимо.

Из этого видно, что вы не можете анимировать новое изображение или повторное значение. Вы можете анимировать свойства стиля, которые являются числом, и несколько других свойств, которые являются числом. Вот как работает jQuery .animate().

Если вы хотите медленно переключаться с одного изображения на другое, вам нужны два объекта: один, который является видимым, это старое изображение, и другой, который не виден, который является новым изображением. Вы используете CSS, чтобы сделать два объекта точно перекрывающимися. Затем вы можете использовать .fadeIn() на новом изображении и .fadeOut() на старом изображении.

Как показал XepterX, background-position-x и background-position-y представлены одним числом, поэтому их можно анимировать, но URL-адрес изображения или значение повтора нельзя анимировать.

0 голосов
/ 03 февраля 2012

ваше 'background-position': '- 85px -0px', измените его на 

'background-position-x':'-85px',
'background-position-y':'0px'
...