Question

I am wondering if it is possible to animate background url using jQuery, and if not, what alternatives I have. My nav bar HTML looks like this:

<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>

Then the CSS for the links in the nav bar looks like this:

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;
}

Then I have a jQuery script which both controls the sliding of a contact form and adds and removes the class “current” to/from the nav links so that the background image changes:

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

});

I am wanting to have a fade between the background images on hover and for the click functions too. Hence my question about animating the background images using jQuery. If it is not possible to do this, is there another method that I could use which would incorporate the existing script that I have?

You can see the page as it currently stands here.

Thanks,

Nick

Answer 1

here is how you can use the hover function with animate. There are more effect just find the right for you on the jQuery document page for animation.

 $("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