我的 jquery 动画功能不起作用

发布于 2025-01-02 06:21:16 字数 394 浏览 0 评论 0原文

当用户将鼠标悬停在按钮上时,我尝试使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

伊面 2025-01-09 06:21:16

希望这段代码会对您有所帮助。我知道,您出于某种目的使用了背景图像,但我试图通过其他方式使事情按预期工作。 :)这是我尝试让箭头动画!

做了一项更改 - 我使用了 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/

橘虞初梦 2025-01-09 06:21:16

你的 'background-position':'-85px -0px', 将其更改为

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

your 'background-position':'-85px -0px', change it to

'background-position-x':'-85px',
'background-position-y':'0px'
瞳孔里扚悲伤 2025-01-09 06:21:16

来自 .animate() 的 jQuery 文档:

动画属性和值所有动画属性都应该是
动画为单个数值,除非如下所述;最多
非数字属性无法使用基本 jQuery 进行动画处理
功能(例如,宽度、高度或左侧可以设置动画,但
背景颜色不能,除非使用 jQuery.Color() 插件)。
除非另有说明,属性值被视为像素数
指定的。可以在适用的情况下指定单位 em 和 %。

从这里可以看出,您无法为新图像或重复值设置动画。您可以为数字样式属性和其他一些数字属性设置动画。这就是 jQuery .animate() 的工作原理。

如果你想慢慢地从一张图像变成另一张图像,那么你需要两个对象,一个是可见的,即旧图像,另一个是不可见的,即新图像。您可以使用 CSS 使两个对象精确重叠。然后,您可以在新图像上使用 .fadeIn() ,在旧图像上使用 .fadeOut()

正如 XepterX 所示,background-position-xbackground-position-y 由单个数字表示,因此它们可以进行动画处理,但图像 URL 或重复值无法动画化。

From the jQuery documentation for .animate():

Animation Properties and Values All animated properties should be
animated to a single numeric value, except as noted below; most
properties that are non-numeric cannot be animated using basic jQuery
functionality (For example, width, height, or left can be animated but
background-color cannot be, unless the jQuery.Color() plugin is used).
Property values are treated as a number of pixels unless otherwise
specified. The units em and % can be specified where applicable.

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 and background-position-y are represented by a single number so they could be animated, but the image URL or the repeat value cannot be animated.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文