Блог

Мне интересно, можно ли анимировать фоновый URL-адрес с помощью jQuery, и если нет, то какие у меня есть альтернативы. Мой 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, который одновременно управляет перемещением контактной формы, а также добавляет и удаляет класс «current» в / из навигационных ссылок, чтобы фоновое изображение менялось:

 $(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. Если это невозможно сделать, есть ли другой метод, который я мог бы использовать, который включал бы существующий скрипт, который у меня есть?

Вы можете увидеть страницу в ее текущем виде здесь.

Спасибо,

Ник

вот как вы можете использовать функцию наведения с помощью animate. Есть еще один эффект, просто найдите подходящий для вас на странице документа 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',
                    }
                });
            }
        });
    });
 

наведите анимацию