是否可以使用jQuery设置背景url的动画？

我想知道是否有可能使用jQuery设置背景url的动画，如果没有，我有什么选择。我的导航栏HTML如下所示：

<li><a href="index.html" class="fade nav top current" id="index"><img style="margin: 90px 0 0 0px" src="images/home.png"></a></li>
     <li><a href="about.html" class="fade nav bottom" id="about"><img class="flip" style="margin: 84px 3px 0 0px" src="images/about.png"></a></li>
     <li><a href="#" id="contact" class="nav top"><img style="margin: 82px 2px 0 0px" src="images/contact.png"></a></li>

a.nav {
    height: 170px;
    width: 118px;
    display: block;
    margin: 0 auto;
}

a.top, a.bottom {
    background: url('images/bodhi-leaf-brown.png') no-repeat;
}

a.current, nav a:hover {
    background: url('images/bodhi-leaf-green.png') no-repeat !important;
}

然后我有一个jQuery脚本，它既控制联系人表单的滑动，又在导航链接中添加和删除当前的类，以便背景图像发生变化：

$(function ()
{

    var newHash = "",
        $mainContent = $("#main-content"),
        $pageWrap = $("#page-wrap"),
        baseHeight = 0,
        $el,
    curTab = "#index";

    $("nav").delegate("a.fade", "click", function ()
    {
        window.location.hash = $(this).attr("href");
        $("#panel").slideUp("slow");
        $(this).addClass("current", 3000);
        $("#contact").removeClass("current", 3000);
        return false;
    });

    $(window).bind('hashchange', function ()
    {

        newHash = window.location.hash.substring(1);

        if (newHash)
        {
            $pageWrap.height($pageWrap.height());
            baseHeight = $pageWrap.height() - $mainContent.height();

            $mainContent
                .find("#guts")
                .fadeOut(500, function ()
                {
                    $mainContent.hide().load(newHash + " #guts", function ()
                    {
                        $pageWrap.animate({ height: baseHeight + $mainContent.height() + "px" }, function ()
                        {
                            $mainContent.fadeIn(500);
                            $pageWrap.css("height", "auto"); 
                        });

                        $("nav a").removeClass("current");
                    curTab = "#" + /^(.+)\..+$/.exec(newHash)[1];
                    $(curTab).addClass("current");
                    });
                });
        };
    });

$("#contact").click(function ()
{
    $("#panel").slideDown("slow");
    $(this).addClass("current");
    $("#index, #about").removeClass("current");
    return false;
});

$(".close").click(function ()
{
    $("#panel").slideUp("slow");
    $(curTab).addClass("current");
    $("#contact").removeClass("current");
    return false;
});

    $(window).trigger('hashchange');

});

我想有一个悬停和点击功能之间的背景图像淡入淡出。因此，我的问题是如何使用jQuery设置背景图像的动画。如果不可能做到这一点，我是否可以使用另一种方法合并我现有的脚本

您可以看到页面当前的状态

谢谢

---

Nick

以下是如何在动画中使用悬停功能。还有更多的效果，只需在jQuery文档中找到适合您的动画即可

 $("nav a").hover(
    function() {
        $(this).animate({
            opacity: .6
        }, {
            duration: 100,
            specialEasing: {
                opacity: 'linear',
            },
            complete: function() {

                $(this).addClass("aHover").animate({
                    opacity: 1
                }, {
                    duration: 100,
                    specialEasing: {
                        opacity: 'linear',
                    }
                });
            }
        });
    }, function() {
        $(this).animate({
            opacity: .6
        }, {
            duration: 100,
            specialEasing: {
                opacity: 'linear',
            },
            complete: function() {

                $(this).removeClass("aHover").animate({
                    opacity: 1
                }, {
                    duration: 100,
                    specialEasing: {
                        opacity: 'linear',
                    }
                });
            }
        });
    });

---

只需更改css“background”属性即可。@bitsMix谢谢。你能再解释一下你的意思吗。是否可以设置CSS背景属性的动画？谢谢。这看起来很有希望！你能告诉我怎样才能使褪色效果变长吗？我想要一个相当快的悬停时淡出，即500毫秒，当用户“离开”div时淡出更长的时间，即3000毫秒。我尝试过调整脚本中的持续时间，但由于您使用的方法，它看起来不正确。持续时间：100-根据需要更改它。对于不透明度，也可以使用不透明度：.6，使用从0到1的值。我也试过了。似乎用你的方法，一个背景需要完全淡出，在另一个可以淡入之前，这不是我想要的。我需要一个适当的交叉褪色，这样叶子的颜色就可以从棕色变为绿色再变回来。好的，我已经把你的答案标记为正确的，因为它确实回答了这个问题。我现在正在尝试一种不同的方法，它使用带绝对定位的div和jquery来设置带绿叶的div的淡入动画，而不是背景图像，因为我认为这对我的目的更有效。我正在将您的一些代码合并到这个中。谢谢，尼克