jquery ролловеры и активные состояния

Прошу прощения за любые глупые вопросы/кодирование, я новичок в jquery!

Я пытаюсь создать меню для одностраничного сайта с прокруткой и активным состоянием. HTML:

<ul id="menu">
<li><a class="rollover" href="#"><img class="folio" src="images/folio3.png" /></a></li>
<li><a class="rollover" href="#"><img class="services" src="images/services3.png" /></a></li>
<li><a class="rollover" href="#"><img class="about" src="images/about3.png" /></a></li>
<li><a class="rollover" href="#"><img class="contact" src="images/contact3.png" /></a></li>
</ul>

JQuery:

$(document).ready(function(){   
$("a.rollover").fadeTo(1,0.5);
$("a.rollover").hover(
        function() {$(this).fadeTo("fast",1);},
        function() {$(this).fadeTo("fast",0.5);});
$("a.rollover").click(function(){
if($(".active").length) {
    if($(this).hasClass("active")) {
    $(this).removeClass("active");
    $(this).fadeTo("fast",0.5);
    } else {
    $(".active").fadeTo("fast",0.5);
    $(".active").removeClass("active");
    $(this).addClass("active"); 
    $(this).fadeTo("fast",1);
    }
} else {    
    $(this).addClass("active");
    $(this).fadeTo("fast",1);
    }});
});

Итак, здесь есть две проблемы:

  1. Несмотря на то, что активный класс добавлен, и в инструментах разработчика Chrome я вижу, что непрозрачность активного класса равна «1», похоже, он не работает в браузере, т.е. непрозрачность по-прежнему отображается в браузере как «0,5».

  2. Если $(this) активен, даже после нажатия $(this) и удаления активного класса непрозрачность остается равной «1». Если я нажму $(this) несколько раз, в конечном итоге непрозрачность снова изменится на «0,5».

Я был бы очень признателен за помощь. Я боролся с этим уже о ... 3 дня, хех :-/

Спасибо заранее...


image click jquery rollover
person circey    schedule 26.02.2010    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Я думаю, это должно делать то, что вы пытаетесь сделать

$(document).ready(function(){   
    $("a.rollover").fadeTo(1,0.5);
    $("a.rollover").hover(function(){
        $(this).fadeTo("fast",1);
    },function(){
        if(!$(this).hasClass('active'))
        {
            $(this).fadeTo("fast",0.5);
        }
    });
    $("a.rollover").click(function(){
        if($('.active').length > 0)
        {                
            if($(this).hasClass('active'))
            {
                $(this).removeClass("active");
                $(this).fadeTo("fast",0.5);
            }
            else
            {
                $(".active").fadeTo("fast",0.5);
                $(".active").removeClass("active");
                $(this).addClass("active");
                $(this).fadeTo("fast",1);
            }
        }
        else
        {
            $(this).addClass("active");
            $(this).fadeTo("fast",1);
        }
        return false;
    });
});
person Nalum    schedule 26.02.2010
comment
Да, это точно! Большое спасибо :-) - person circey; 26.02.2010

arrow_upward
0
arrow_downward

Попробуй это, немного похрустывал

$(function(){   
  $("a.rollover").fadeTo(1,0.5);
  $("a.rollover").hover(
    function() {$(this).stop().fadeIn("fast");},
    function() {$(this).stop().fadeTo("fast",0.5);}
  ).click(function(){
    var ia = $(this).hasClass("active"); //Was it active before?
    $(".active").fadeTo("fast",0.5).removeClass("active"); //Remove actives
    $(this).toggleClass("active", !ia); //Switch active to reverse of previous
    $(".active").stop().fadeIn("fast");//Fade in anything active (this if it is)
  }});
});
person Nick Craver    schedule 26.02.2010
comment
Спасибо, Ник, за очень быстрый ответ! К сожалению, хотя наведение и добавление/удаление активного класса работают, у меня все еще есть те же проблемы: 1. Непрозрачность активного класса в инструментах разработчика равна 1, но все еще отображается как 0,5 в браузере. . 2. Щелчок по активному изображению удаляет активный класс, но непрозрачность остается равной 1. Многократное нажатие на одно и то же изображение в конечном итоге изменяет непрозрачность на 0,5, но это также может произойти, когда изображение переключается обратно на активный класс. - person circey; 26.02.2010
comment
@circey - для № 1 атрибуты класса css и встроенные атрибуты в конкретном элементе всегда могут быть разными. Для № 2 я бы удалил все объявления непрозрачности из css в вашем случае, я думаю, это значительно упростит то, что вы пытаетесь сделать. - person Nick Craver; 26.02.2010
comment
Спасибо, но css не содержит никаких объявлений непрозрачности, и css также не содержит никаких атрибутов для класса .active. - person circey; 26.02.2010

arrow_upward
0
arrow_downward

Попробуйте это, я думаю, должно сработать:

$(function() {
    $("a.rollover img").fadeTo(1, 0.5);
    $(".active").fadeTo(0.5, 1);

    $("a.rollover img").hover(
        function() {
            if ( ! $(this).hasClass("active")) {
                $(this).stop().fadeTo("fast", 1);
            }
        },
        function() {
            if ( ! $(this).hasClass("active")) {
                $(this).stop().fadeTo("fast", 0.5);
            }
        }
    ).click(function() {
        var ia = $(this).hasClass("active"); //Was it active before?
        $(".active").fadeTo("fast", 0.5).removeClass("active"); //Remove actives
        $(this).toggleClass("active", !ia); //Switch active to reverse of previous
        $(".active").stop().fadeTo("fast", 1); //Fade in anything active (this if it is)
    });
});
person David Hancock    schedule 26.02.2010
comment
Нет, это тоже не сработало. Тем не менее, спасибо за ваши усилия! - person circey; 26.02.2010