我的 jquery 动画功能不起作用
当用户将鼠标悬停在按钮上时,我尝试使用 jquery 动画函数更改按钮箭头图像,但它不起作用。这是我的代码,这是我的脚本。
$('.Button').mouseenter(function(){
$('.arrow-image').animate({
'background-image':'url(images/sp-images.png)',
'background-repeat':'no-repeat',
'background-position':'-85px -0px'
},5000);
});
When the user hovers over the button, I am trying to change the button arrow image using the jquery animate function but it's not working. Here is my code and this is my script.
$('.Button').mouseenter(function(){
$('.arrow-image').animate({
'background-image':'url(images/sp-images.png)',
'background-repeat':'no-repeat',
'background-position':'-85px -0px'
},5000);
});
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
希望这段代码会对您有所帮助。我知道,您出于某种目的使用了背景图像,但我试图通过其他方式使事情按预期工作。 :)这是我尝试让箭头动画!
做了一项更改 - 我使用了 img 标签,而不是使用背景图像。
在这里检查:http://jsfiddle.net/ylokesh/HvdZP/1/
Hope, this piece of code would be of any help. I know, you have used background image for some purpose but i was trying to make the things work as expected with some other way around. :) here is my try to make the arrow animate !
Made one change - rather using background image, i have used img tag.
check it here: http://jsfiddle.net/ylokesh/HvdZP/1/
你的 'background-position':'-85px -0px', 将其更改为
your 'background-position':'-85px -0px', change it to
XepterX 是正确的:
http://jsfiddle.net/YSGYz/7/
XepterX is right:
http://jsfiddle.net/YSGYz/7/
来自
.animate()
的 jQuery 文档:从这里可以看出,您无法为新图像或重复值设置动画。您可以为数字样式属性和其他一些数字属性设置动画。这就是 jQuery
.animate()
的工作原理。如果你想慢慢地从一张图像变成另一张图像,那么你需要两个对象,一个是可见的,即旧图像,另一个是不可见的,即新图像。您可以使用 CSS 使两个对象精确重叠。然后,您可以在新图像上使用
.fadeIn()
,在旧图像上使用.fadeOut()
。正如 XepterX 所示,
background-position-x
和background-position-y
由单个数字表示,因此它们可以进行动画处理,但图像 URL 或重复值无法动画化。From the jQuery documentation for
.animate()
:From this one can see that you can't animate to a new image or to a repeat value. You can animate style properties that are a number and a few other properties that are a number. That's how jQuery
.animate()
works.If you want to slowly change from one image to another, then you need two objects, one that is visible that is the old image and one that is not visible that is the new image. You use CSS to make the two objects overlap exactly. You can then use
.fadeIn()
on the new image and.fadeOut()
on the old image.As XepterX has shown,
background-position-x
andbackground-position-y
are represented by a single number so they could be animated, but the image URL or the repeat value cannot be animated.