Использование jQuery для переключения между вкладками с использованием непрозрачности для выделения

Проблема:

Я создаю страницу галереи для своего личного сайта-портфолио. Мне нужно, чтобы в верхней части было несколько ссылок для разных категорий моего искусства. После входа на сайт будет выбран вариант «все», и все миниатюры моих работ будут отображаться с полной непрозрачностью. При нажатии на ссылку только миниатюры, принадлежащие к категории, соответствующей ссылке, останутся со 100%-ной непрозрачностью, а остальные будут затемнены до 50%.

У меня есть код, который, как мне кажется, близок к правильному, но по-прежнему ничего не делает. Ниже приведен код, с которым я работаю.

(Сокращенный) HTML:

<ul id="filterOptions">
<li class="active"><a href="#" class="all">All</a></li>
<li><a href="#" class="ty">Typography</a></li>
<li><a href="#" class="pr">Print</a></li>
</ul>

<ul class="ourHolder">
<li data-type="ty"><a href="img.jpg"><img src="img.png"/></a></li>
<li data-type="il"><a href="img.jpg"><img src="img.png"/></a></li>
<li data-type="pr"><a href="img.jpg"><img src="img.png"/></a></li>

CSS:

$(document).ready(function() {

  var $holder = $('ul.ourHolder');

  var $data = $holder.clone();

    $('#filterOptions li a').click(
    function(e) {
        // reset the active class on all the buttons
        $('#filterOptions li').removeClass('active');

        // assign the class of the clicked filter option
        // element to our $filterType variable
        var $filterType = $(this).attr('class');
        $(this).parent().addClass('active');

        if ($filterType == 'all') {
            // assign all li items to the $filteredData var when
            // the 'All' filter option is clicked
            var $filteredData = $data.find('li');
            $filteredData.animate({opacity: 1.0}, 500);
        } 
        else {
             var $filteredData = $data.find('li[data-type=' + $filterType + ']');
             $filteredData.animate({opacity: 0.5}, 500);
        }

    });
});

Любая помощь очень ценится, мне нужно запустить мой новый сайт, и этот кусок кода - все, что меня сдерживает!


person Kaitlyn    schedule 07.07.2013    source источник
comment
Попробуйте использовать $fiteredData.fadeTo(500,1) and $filteredData.fadeTo(500,.5) вместо animate.   -  person scel.pi    schedule 07.07.2013
comment
Это все еще ничего не делает. Независимо от того, как это напечатано, все всегда имеет 100% непрозрачность.   -  person Kaitlyn    schedule 07.07.2013
comment
По сути, это эффект, который я ищу: davewhitley.com Но все не должно начинаться с черного и белый.   -  person Kaitlyn    schedule 07.07.2013


Ответы (1)


демонстрация jsFiddle

HTML

<ul id="filterOptions">
    <li class="active"><a href="#" data-type="all">All</a>

    </li>
    <li><a href="#" data-type="ty">Typography</a>

    </li>
    <li><a href="#" data-type="pr">Print</a>

    </li>
</ul>
<ul class="ourHolder">
    <li class="ty"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="il"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="pr"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="ty"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="il"><a href="img.jpg"><img src="img.png"/></a>

    </li>
    <li class="pr"><a href="img.jpg"><img src="img.png"/></a>

    </li>
</ul>

JQuery

$(document).ready(function () {
    var $holder = $('ul.ourHolder');
    var $data = $holder.clone();
    var holders = $('.ourHolder li');
    $('#filterOptions li a').click(
    function (e) {
        // reset the active class on all the buttons
        $('#filterOptions li').removeClass('active');
        // assign the class of the clicked filter option
        // element to our $filterType variable
        var $filterType = $(this).data('type');
        var noOpac = $(this).data('type');
        $(this).parent().addClass('active');
        if ($filterType == 'all') {
            // assign all li items to the $filteredData var when
            // the 'All' filter option is clicked
            var $filteredData = $data.find('li');
            $filteredData.animate({
                opacity: 1.0
            }, 500);
            $('.ourHolder li').animate({
                opacity: 1.0
            }, 0);
        } else {
            $('.ourHolder li').animate({
                opacity: 0.5
            }, 250);
            $.each(holders, function (i, v) {
                if ($(this).hasClass(noOpac)) {
                    $(this).animate({
                        opacity: 1.0
                    }, 0);
                }
            });
        }

    });
});
person DevlshOne    schedule 07.07.2013
comment
Спасибо огромное. На самом деле я не знаю, что делает часть .each, но я очень ценю этот код. Конечно, это будет работать для того, что мне нужно, но есть ли способ заставить эффект постепенного появления и исчезновения происходить одновременно, а не один за другим? - person Kaitlyn; 07.07.2013
comment
$.each — это просто итератор jQuery для объекта, который содержит элементы, выбранные с помощью $('.ourHolder li'). Я просмотрел свой jsFiddle несколько раз, и хотя <li> снова включаются последовательно, слишком быстро, чтобы различать их по отдельности. - person DevlshOne; 07.07.2013
comment
Хм, по какой-то причине, когда я использую демо, я получаю кучу всплывающих окон с истинными или ложными значениями для каждого изображения, поэтому я не вижу, как они переходят. Как это показано на веб-сайте, над которым я работаю, вы можете четко видеть часть затухания, а затем появление. Это нормально, когда вы переключаетесь между вкладками, но при первом щелчке на вкладке «Все», где все на 100 %, на любой из вкладок, вы ясно видите, как он переходит от всех 100% ко всем 50%, к нескольким изображениям обратно к 100%. Это не страшно, но если есть способ исправить это, я бы хотел. Если нет, то я просто поправлю. Еще раз большое спасибо! - person Kaitlyn; 07.07.2013
comment
Ах, извините, я оставил там «предупреждение». Попробуйте это: jsfiddle.net/devlshone/Jj4FH/1 О, и, пожалуйста, не забудьте ПРИНИМАЙТЕ ответ, если он вас устраивает. - person DevlshOne; 07.07.2013
comment
Должно быть, я просто больше замечаю паузу, так как мои миниатюры довольно большие. На самом деле это не так уж важно, он все еще делает то, что я хочу. Большое спасибо за вашу помощь! Это возвращает запуск всего моего веб-сайта в нужное русло, и это так здорово. - person Kaitlyn; 07.07.2013
comment
Я только что снова изменил jsfiddle.net/devlshone/Jj4FH.. попробуйте сейчас и посмотрите, что вы считать. - person DevlshOne; 07.07.2013
comment
Получил это, чтобы сделать именно то, что я хочу сделать с небольшим изменением, еще раз спасибо за всю вашу помощь! - person Kaitlyn; 07.07.2013