Скрипт не затухает неактивные ссылки навигации - PullRequest
Новая
       18

Скрипт не затухает неактивные ссылки навигации

1 голос
/ 24 октября 2011

Я использую скрипт на этой странице , который делает все, что я хочу, т.е. изменение цвета листьев в навигационной панели при наведении курсора, постепенное исчезновение между страницами с использованием метода хеширования и скольжениеконтактной формы.Единственное, что не работает, - это исчезновение div .current в неактивных навигационных ссылках (т. Е. Когда пользователь нажимает на лист, чтобы изменить страницу, я бы хотел, чтобы зеленый лист на странице былосталось потухнуть).

Я надеялся, что добавление этого кода будет обрабатывать исчезновение ссылок, кроме активной, но когда я добавлю его в функцию щелчка делегата, все листья останутся коричневыми, т.е.может показаться, что not (this) не работает, и что все div div nav .current исчезают до непрозрачности: 0: 

$(".current").not(this).stop().animate({
            opacity: 0
        }, {
            duration: 2000,
            specialEasing: {
                opacity: 'linear',
            },

        });

Я создал jsfiddle с соответствующим кодом здесь .Я также включил полный сценарий, а также html и css для панели навигации ниже, и был бы рад некоторой помощи, чтобы заставить это работать.

Спасибо,

Ник

СЦЕНАРИЙ 

$(function ()
{

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

    $panel.visible = false;

    $("nav").delegate("a", "click", function ()
    {
        window.location.hash = $(this).attr("href");
        $("#panel").slideUp("slow");
        $(this).addClass('clicked');
        $("a").not(this).removeClass('clicked');
        $(".current", this).stop().animate({
            opacity: 1
        }, {
            duration: 100,
            specialEasing: {
                opacity: 'linear',
            },

        });

        return false;
    });

    $("#nav-bottom").delegate("a", "click", function ()
    {
        $("#panel").slideDown("slow");
        return false;
    });

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

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

        if (newHash)
        {
            if ($panel.visible)
            {
                $pageWrap.animate({ height: "-=" + $panel.height() + "px" }, function ()
                {
                    $pageWrap.height($pageWrap.height());
                    $panel.visible = false;
                });
                $panel.slideUp();
                baseHeight = $pageWrap.height() - $mainContent.height() - $panel.height();
            }
            else
            {
                $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");
//                        $("nav a[href=\"" + newHash + "\"]").addClass("current");
                    });
                });
        };
    });

    $("#contact").click(function ()
    {
        $("#panel").slideDown("slow");
//        $(this).addClass("current");
//        $("#home, #about").removeClass("current");
        $panel.visible = true;
        return false;
    });

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

    $("nav a").hover(
        function() {
            if(!$(this).hasClass('clicked')){

            $(".current", this).stop().animate({
                opacity: 1
            }, {
                duration: 300,
                specialEasing: {
                    opacity: 'linear',
                },

            });
            }
        }, function() {
        if(!$(this).hasClass('clicked')){
            $(".current", this).stop().animate({
                opacity: 0
            }, {
                duration: 2000,
                specialEasing: {
                    opacity: 'linear',
                },

        });

        }
    });

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

});

HTML 

<nav>

<div id="nav1">
     <a href="index.html" class="fade" id="index">

     <div class="nav-image"><img src="images/bodhi-leaf-brown.png"></div>

     <div class="current"><img src="images/bodhi-leaf-green.png"></div>
     <div class="text"><img src="images/home.png"></div>

     </a>
</div>

<div id="nav2">
     <a href="about.html" class="fade" id="about">

     <div class="nav-image"><img src="images/bodhi-leaf-brown.png" class="flip"></div>

     <div class="current"><img src="images/bodhi-leaf-green.png" class="flip"></div>
     <div class="text"><img src="images/about.png"></div>

     </a>
</div>

<div id="nav3">

     <a href="index.html" class="" id="contact">

     <div class="nav-image"><img src="images/bodhi-leaf-brown.png"></div>

     <div class="current"><img src="images/bodhi-leaf-green.png"></div>
     <div class="text"><img src="images/contact.png"></div>

     </a>
</div>

</nav>

CSS 

nav {
    width: 650px;
    height: 170px;
    position: absolute;
    top: 100;
    left: 200;
}

#nav1 {
    position: absolute;
    top: 0;
    left: 120px;
}

#nav2 {
    position: absolute;
    top: 0;
    left: 340px;
}

#nav3 {
    position: absolute;
    top: 0;
    left: 560px;
}


.nav-image  {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;

}

.current {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    opacity: 0;
}

Ответы [ 2 ]

2 голосов
/ 26 октября 2011

Проблема в том, что $(".current") выбирает <div> элементов.Функция запускает события, прикрепленные к <a> элементам, поэтому this относится к <a> элементам, поэтому not никогда не соответствует элементам.

Чтобы сопоставить not, вам нужно выбрать элемент .current, который содержится в this, следующим образом: 

$(".current").not($(".current",this))
0 голосов
/ 26 октября 2011

Итак, основная проблема здесь в том, что в обработчике кликов this относится к элементу a, по которому был выполнен щелчок, который является родительским элемента div.current, на который вы нацелены , Попробуйте: 

var $this = $(this),
    $others = $('nav a').not(this);

$(".current", this).stop().animate({
    opacity: 1
}, {
    duration: 100,
    specialEasing: {
        opacity: 'linear',
    },

});

$(".current", $others).stop().animate({
    opacity: 0
}, {
    duration: 2000,
    specialEasing: {
        opacity: 'linear',
    },

});
...