Disable/enable hover on click in other script?
Hi!
I am a newbe as it comes to jQuery..
I'm working on my portfolio, and i'm stuck.. I have a page with all portfolio-items (images) that can be sorted by category. So when i press on category 'Art', all the other catergory's turn to a low opacity so the selected category stay''s highlighted. See it working here:
http://www.idvisual.nl/temp/IDVISUALV3/
But when I hover over the items with the low opacity, they become highlighted again. How do i lock these items so that when a category is selected, the other items (images) stay locked on rollover?
this is the code i used in the index.html (this for each category):
-
<!--fade art-->
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(".art").css({opacity: 0}); // Loaded at 0 opacity
$j(".art").fadeTo(900, 0.8); // Onload fade items to 80%
$j(".art").hover(function(){
$j(this).fadeTo("fast", 1.0); // Rollover at 100%
},function(){
$j(this).fadeTo("fast", 0.8); // Rollout at 80%
});
});
And this code for the category filter (code is a external .js file):
-
$(document).ready(function() {
$('ul#navfilter a').click(function() {
$(this).css('outline','none');
$('ul#navfilter .current').removeClass('current');
$(this).parent().addClass('current');
var filterVal = $(this).text().toLowerCase().replace(' ','-');
if(filterVal == 'all') {
$('.wrap .hidden').fadeTo('slow' ,0.8).removeClass('hidden');
} else {
$('.wrap .masonryWrap > div').each(function() {
if(!$(this).hasClass(filterVal)) {
$(this).fadeTo('slow' ,0.08).addClass('hidden');
} else {
$(this).fadeTo('slow' ,0.8).removeClass('hidden');
}
});
}
return false;
});
});
I hope someone can help..
Thanks!