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

Проблемът:

Създавам страница с галерия за сайта си с лично портфолио. Имам нужда да има множество връзки в горната част за различни категории от моето изкуство. При кацане на сайта ще бъде избрана опцията „всички“ и всички миниатюри на моето изкуство ще се показват при пълна непрозрачност. Когато се щракне върху връзка, само миниатюрите, принадлежащи към категорията, съответстваща на връзката, ще останат със 100% непрозрачност, докато останалите ще се затъмнят до 50%.

Имам код, който според мен е почти правилен, но все още не прави нищо. По-долу е кодът, с който работя.

(Съкратеният) HTML:

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

<ul class="ourHolder">
<li data-type="ty"><a href="/bgimg.jpg"><img src="img.png"/></a></li>
<li data-type="il"><a href="/bgimg.jpg"><img src="img.png"/></a></li>
<li data-type="pr"><a href="/bgimg.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

Искам да използвам MongoDB в моето rails приложение и имам проблем:

Не можа да се свърже с основен възел за набор от реплики #]>

Ето какво направих, за да настроя моя проект:

Създаде нов проект със следната команда, за да замени Mongoid с rails active-record:

rails new hellomongoid --skip-active-record

Добавих „mongoid“, „~4.0.0“ и „bson_ext“ скъпоценни камъни към моя Gefile и стартирах успешно инсталирането на пакета.

Генерира mongoid:config с тази команда:

rails g mongoid:config

Генерирано ново скеле:

rails g scaffold Car model:string manufacturer:string year:string

Стартира MongoDB с командата Mongod и стартира приложението rails в localhost.

Сега получавам това досадно съобщение за грешка, когато се опитам да стигна до localhost:3000/cars. Пише, че се среща точно тук:

 <tbody>
   **<% @cars.each do |car| %>**
     <tr>
       <td><%= car.model %></td>
       <td><%= car.manufaturer %></td>

Where I was wrong?

Конфигурацията както на Mongod, така и на моите rails Mongoid е зададена на порт 27017...

РЕДАКТИРАНЕ:

Това е моят файл mongoid.yml:

development:  
  sessions:    
    default:      
      database: yomongo_development      
      hosts:
        - localhost:27017
      options:        
  options:    
test:
  sessions:
    default:
      database: yomongo_test
      hosts:
        - localhost:27017
      options:
        read: primary        
        max_retries: 1
        retry_interval: 0
  -  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="/bg#" data-type="all">All</a>

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

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

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

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

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

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

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

    </li>
    <li class="pr"><a href="/bgimg.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
Хм, по някаква причина, когато използвам демонстрацията, получавам куп изскачащи прозорци с true или false в тях за всяко изображение, така че не мога да видя как преминават. Начинът, по който се показва на уебсайта, върху който работя, можете ясно да видите избледняващата част, след това избледняващата. Добре е, когато превключвате между раздели, но при първото щракване от раздела всички, където всичко е на 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