Question

我有一个功能悬停替换，可以在悬停时插入背景图像并在mouseout上删除它。

<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来制作它。

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

2 个答案: