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

Question

我想知道是否可以使用 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>

那么导航栏中链接的 CSS 如下所示：

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 为背景图像设置动画。如果无法做到这一点，是否可以使用另一种方法来合并我拥有的现有脚本？

您可以查看当前页面here。

谢谢，

尼克

Answer 1

这里是你如何使用悬停功能的动画。在 jQuery 文档page 上找到适合您的动画效果。

 $("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',
                    }
                });
            }
        });
    });

hover animate