Как мне изменить скрипт наведения, чтобы он тоже работал с функциями нажатия? - PullRequest
Новая
       36

Как мне изменить скрипт наведения, чтобы он тоже работал с функциями нажатия?

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

У меня есть следующий скрипт на этой странице , который обрабатывает появление и исчезновение div для изменения цвета листьев в навигационной панели при наведении на них, скольжения контактной формы и исчезновение содержимого одной страницы на другую: 

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


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

    return false;
});

$(".close").click(function ()
{
    $("#panel").slideUp("slow");
    return false;
});

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

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

    });
});


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

});

Теперь я хочу, чтобы это работало с некоторыми функциями щелчка, т. Е. Чтобы лист текущей страницы оставался зеленым, а не коричневым, а лист контактов зеленым, когда контактная форма открыта, но я не уверен, как сделать это. Например, я попытался изменить делегат на это: 

$("nav").delegate("a.fade", "click", function ()
    {
        window.location.hash = $(this).attr("href");
        $("#panel").slideUp("slow");

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

        });

Но страница, по которой щелкают, не остается зеленой. Как только мышь перемещается из div, она становится коричневой.

Я был бы благодарен, если бы кто-нибудь мог помочь мне заставить это работать.

Спасибо

Ник

HTML ДОБАВЛЕНО: 

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

Ответы [ 2 ]

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

Просто добавьте класс к элементу при его нажатии.Затем, внутри ваших функций наведения, сначала проверьте, имеет ли элемент этот класс, и переходите к эффекту наведения, только если у него нет этого класса.

Примерно так: http://jsfiddle.net/2J8Cc/

$('div').hover(function(){
    if(!$(this).hasClass('clicked')){
        $(this).fadeTo(250,1);
    }
},function(){
    if(!$(this).hasClass('clicked')){
        $(this).fadeTo(250,0.5);
    }
})
.click(function(){
   $(this).addClass('clicked');     
});

РЕДАКТИРОВАТЬ
В ответ на комментарий ОП к этому ответу, вот как я бы это сделал, учитывая предоставленный им HTML: 

$("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',
                },
            });
        }
})
.click(function(){
    $(this).addClass('clicked');
});
0 голосов
/ 24 октября 2011

Я думаю, что это должно работать так:

  1. когда по листу щелкают, просто исчезают и по окончании присоединяют некоторый класс css, который будет держать лист зеленым.
  2. при нажатии на другой лист просто сбросьте все листья до коричневого (если у вас есть, скажем, зеленый класс, вы можете исчезнуть) и сделайте отдых, как в пункте 1

Так что это действительно должно работать, как сбросить листья до коричневого и оставить один нажатым зеленым.

Если вам нужен код, просто спросите: D

...