向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来使其具有动画效果。