Проблема:
Я создаю страницу галереи для своего личного сайта-портфолио. Мне нужно, чтобы в верхней части было несколько ссылок для разных категорий моего искусства. После входа на сайт будет выбран вариант «все», и все миниатюры моих работ будут отображаться с полной непрозрачностью. При нажатии на ссылку только миниатюры, принадлежащие к категории, соответствующей ссылке, останутся со 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); } }); });
Любая помощь очень ценится, мне нужно запустить мой новый сайт, и этот кусок кода - все, что меня сдерживает!
$fiteredData.fadeTo(500,1) and $filteredData.fadeTo(500,.5)
вместоanimate
. - person scel.pi   schedule 07.07.2013