当前位置：文江博客话题详情

jQuery 淡入淡出效果

发布于 2024-10-15 21:56:58 字数 297 浏览 4 评论 0原文

我找不到我的问题的确切答案。

这是我用 css sprites 创建的按钮。你可以看到。当鼠标悬停时，背景颜色变为白色（不透明度 15%，背景透明）。

我想给这个按钮添加一个 jQuery 效果。当鼠标悬停时，背景图像会缓慢变化。并且慢慢变白。

我正在尝试这个。背景图像变化但速度不慢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

旧人哭 2024-10-22 21:56:58

问题用这段代码解决了：

$('#footerSocialLinks a').hover(function() {

    $(this).fadeTo(150, 1, function() {

        $(this).css("background-position", "0 -37px");
   });
}, function() {
    $(this).fadeTo(250, 1, function() {

        $(this).css("background-position", "0 0px");
   });
});

problem solved with this code :

$('#footerSocialLinks a').hover(function() {

    $(this).fadeTo(150, 1, function() {

        $(this).css("background-position", "0 -37px");
   });
}, function() {
    $(this).fadeTo(250, 1, function() {

        $(this).css("background-position", "0 0px");
   });
});

回复收藏 0 原文

一世旳自豪 2024-10-22 21:56:58

这里的一种解决方案是 animate() 效果。此效果会在动画持续时间内更改一个或多个 css 属性。

不幸的是，标准 JQuery 函数仅适用于纯数值，因此无法更改背景颜色。

幸运的是，JQuery UI 附带了一个扩展的动画函数，能够更改背景颜色。

$("#footerSocialLinks").children().hover(function(){
          $(this).animate({"backgroundColor":"white"},500);},
    function(){
          $(this).animate({"backgroundColor":"#999"},500);});

One solution here is the animate() effect. This effect changes one or more css properties over the duration of the animation.

Unfortunately, the standard JQuery function only works with purely numeric values, so background color can't be changed with it.

Fortunately, JQuery UI comes with an extended animate function that is capable of changing the background color.

$("#footerSocialLinks").children().hover(function(){
          $(this).animate({"backgroundColor":"white"},500);},
    function(){
          $(this).animate({"backgroundColor":"#999"},500);});

回复收藏 0 原文

~没有更多了~