如何淡入jquery中背景图像的背景位置变化?
我使用一个巨大的精灵作为一个元素,在悬停时改变不同的状态。我想知道是否有办法让悬停状态图像淡入?您可以实时查看我的代码 - 此处
这是我针对每个跨度的悬停状态的代码
$(".hf-1").hover(
function () {
$(this).css("background-position","0 -121px");
$(".hf-2").css("background-position","0 -242px");
$(".hf-3").css("background-position","0 -363px");
$(".hf-4").css("background-position","0 -484px");
},
function () {}
);
我使用 Jquery 来执行背景图像悬停而不是基本 css,因为我有多个悬停需要重置。
感谢您的任何帮助。
I am using a giant sprite for an element that changes different states at hover. I was wondering if there was a way to have the hover state image fade in? You can view my code live - here
Here's my code for the hover state for each span
$(".hf-1").hover(
function () {
$(this).css("background-position","0 -121px");
$(".hf-2").css("background-position","0 -242px");
$(".hf-3").css("background-position","0 -363px");
$(".hf-4").css("background-position","0 -484px");
},
function () {}
);
I am using Jquery to do the background image hover instead of basic css cause i have multiple hovers that need to be reset.
Thanks for any help.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
使用这样的方法:
冲洗并重复其他三个。
Use something like this:
Rinse and repeat for the other three.
您需要双层堆叠背景并从另一个淡入淡出。在同一个容器内不会褪色。
You would need to double-stack the backgrounds and fade from to the other. Won't be able to fade within the same container.
或者你可以只使用 jquery 的原生 fadeIn API。
Or you can just use jquery's native fadeIn API.