Можно ли анимировать фоновый URL с помощью jQuery? - PullRequest
Новая
       33

Можно ли анимировать фоновый URL с помощью jQuery?

0 голосов
/ 22 октября 2011

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

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

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

Спасибо,

Ник

1 Ответ

0 голосов
/ 22 октября 2011

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

анимация при наведении

...