如何淡入jquery中背景图像的背景位置变化?

发布于 2024-09-29 10:39:20 字数 607 浏览 0 评论 0原文

我使用一个巨大的精灵作为一个元素,在悬停时改变不同的状态。我想知道是否有办法让悬停状态图像淡入?您可以实时查看我的代码 - 此处

这是我针对每个跨度的悬停状态的代码

$(".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 技术交流群。

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

发布评论

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

评论(3

子栖 2024-10-06 10:39:20

使用这样的方法:

$(this).animate({"background-position": "0 -121px"}, "slow");

冲洗并重复其他三个。

Use something like this:

$(this).animate({"background-position": "0 -121px"}, "slow");

Rinse and repeat for the other three.

月牙弯弯 2024-10-06 10:39:20

您需要双层堆叠背景并从另一个淡入淡出。在同一个容器内不会褪色。

You would need to double-stack the backgrounds and fade from to the other. Won't be able to fade within the same container.

茶花眉 2024-10-06 10:39:20

或者你可以只使用 jquery 的原生 fadeIn API。

 $(this).click(function () {
            $("this").fadeIn("slow");
          });

Or you can just use jquery's native fadeIn API.

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