为 jQuery 悬停功能添加平滑淡入淡出/过渡

Question

我有一个功能性的悬停替换，它在悬停时插入背景图像并在鼠标移出时将其删除。

<script  type='text/javascript'>
$(document).ready(function(){
    $("#l-1").hover(function() {
        $("#r-box").css("background","url('<?php bloginfo('template_directory'); ?>/images/up.png') no-repeat transparent");
            }, function() {
        $("#r-box").css("background","#3DA7BC");
    });
});
</script>

但我正在努力使过渡平稳而优雅，而不仅仅是进出。我尝试了各种 .animate 函数使其无法正常工作。

感谢您的帮助！

Answer 1

您可以尝试使用 jQuery 为相关对象的不透明度设置动画。

我的算法是这样的：

1) 将不透明度设置为某个值，使其更透明
2) 在回调部分，使用css({key:value})更改背景图片
3) 将不透明度设置回原始值

$('.your-base-object').hover(function(){
        $(this).animate({opacity: '0.9'}, 300, function(){
            $(this).css({
                background: "url('path/to/your-image')"
            });
            $(this).animate({
                opacity: "1.0"
            }, 300);
        })
    }, function(){
        $(this).animate({opacity: '0.9'}, 300, function(){
            $(this).css({
                background: "url('path/to/your-image')"
            });
            $(this).animate({
                opacity: "1.0"
            }, 300);
        })
    });

Answer 2

您可能无法为此类项目的背景设置动画。来自 jQuery 的动画页面：

所有动画属性都应该是 动画到单个数值， 除非如下所述；大多数属性 不能是非数字的 使用基本 jQuery 制作动画 功能。 （例如，宽度， 高度或左侧可以设置动画，但 背景颜色不能。）属性 值被视为一些 像素，除非另有说明。这 单位 em 和 % 可以在哪里指定 适用。

我建议做的是使用其他方式来显示背景图像中的任何内容。也许把它放在一个隐藏的 span 标签中，并通过fadeIn 或fadeOut 对其进行动画处理。