Stop/Start 'hover' sur click

Question

Je suis un newbe car il s'agit de jQuery .. Je travaille sur mon portfolio, et je suis coincé .. J'ai une page avec tous les éléments du portfolio (images) cela peut être trié par catégorie. Donc quand j'appuie sur la catégorie 'Art', toutes les autres catégories se tournent vers une faible opacité pour que la catégorie sélectionnée reste surlignée. Voir le fonctionnement ici: link text

Mais lorsque je survole les éléments avec l'opacité faible, ils sont mis en évidence à nouveau. Comment est-ce que je verrouille cette fonction .hover temporaire de sorte que quand une catégorie est choisie, les autres éléments (images) ne font rien quand survolé?

c'est le code i utilisé pour le vol stationnaire dans le index.html (ce pour chaque catégorie):

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% 
    }); 
}); 

Et ce code pour le filtre de la catégorie (le code est un fichier .js externe):

$(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; 
}); 
}); 

J'espère que quelqu'un peut aider ..

Merci!

------ ----- modifier

Oké i changé le gestionnaire d'événements dans le premier bloc de code à:

$j(".art").hover(function() { 
    if (! j$(this).hasClass("hidden")) { 
     $j(this).fadeTo("fast", 1.0); 
    } // Rollover at 100% 
},function(){ 
    if (! j$(this).hasClass("hidden")) { 
     $j(this).fadeTo("fast", 0.8); // Rollout at 80% 
    } 
}); 

Comme CrazyJugglerDrummer dit. Mais maintenant, la fonction de vol stationnaire ne fonctionne pas du tout .. Et je suis une erreur de syntaxe sur une ligne beaucoup plus loin dans le document (voir la dernière ligne ci-dessous):

<script type="text/javascript">$(function(){ 
    //run masonry when page first loads 
    $('.wrap').masonry(); 

    //run masonry when window is resized 
    $(window).resize(function() { 
     $('.wrap').masonry(); 
    }); 
}) //syntax error on this line </script> 

Maintenant, je roulés dans la « noConflict 'et suivi' conseil de RUSS CAM comme ceci:

<script type="text/javascript"> 
jQuery.noConflict();jQuery(document).ready(function($) { 
    //run masonry when page first loads 
    jQuery('.wrap').masonry(); 

    //run masonry when window is resized 
    jQuery(window).resize(function() { 
     jQuery('.wrap').masonry(); 
    }); 

      }); // Still syntax error on this line 
</script> 

Mais maintenant j'ai encore l'erreur de syntaxe sur la dernière ligne de ci-dessus.

Est-ce que je fais quelque chose de mal ici?

---

Merci CrazyJugglerDrummer, je reçois seulement maintenant une erreur de syntaxe sur la ligne 206 dans le fichier html, voir la dernière ligne ci-dessous

<script type="text/javascript">$(function(){ 
//run masonry when page first loads 
$('.wrap').masonry(); 

//run masonry when window is resized 
$(window).resize(function() { 
    $('.wrap').masonry(); 
}); 

     }) //syntax error on this line </script> 

Cela se produit lorsque je mets dans votre code. et quand je me lance, tous les éléments du portfolio ne fondent pas et ne bougent pas du tout lorsque la page est chargée. Quelqu'un peut-il me dire quelle est la cause de l'erreur de syntaxe? Et est-ce que l'erreur de syntaxe est la raison pour laquelle rien ne s'estompe (lorsque la page est chargée) ou que l'on se déplace plus?

Answer 1

Tout d'abord, si vous; re en utilisant $(document).ready(), vous pouvez éviter l'appel noConflict() à commencer par utiliser

jQuery(document).ready(function($) { ... }); // pass in jQuery as $ argument 

dans votre gestionnaire d'événements hover(), il vous suffit de vérifier la classe hidden CSS, et s'il est présent, n'effectuez pas le changement d'opacité (via le fondu).

Answer 2

Changer votre gestionnaire d'événements dans le premier bloc de code à:

$j(".art").hover(function() { 
    if (! $j(this).hasClass("hidden")) { 
     $j(this).fadeTo("fast", 1.0); 
    } // Rollover at 100% 
},function(){ 
    if (! $j(this).hasClass("hidden")) { 
     $j(this).fadeTo("fast", 0.8); // Rollout at 80% 
    } 
}); 

Si l'élément est caché (hasClass (« caché »)), alors nous ne se fane pas dans ou à l'extérieur. : D

Answer 3

Ça a fonctionné maintenant! J'ai changé le gestionnaire d'événements ci-dessous:

$j(".art").hover(function() { 
    if (! j$(this).hasClass("hidden")) { 
     $j(this).fadeTo("fast", 1.0); 
    } // Rollover at 100% 
},function(){ 
    if (! j$(this).hasClass("hidden")) { 
     $j(this).fadeTo("fast", 0.8); // Rollout at 80% 
    } 
}); 

au code ci-dessous:

$j(".art").hover(function(){ 
     if(!$j(this).hasClass("hidden")){ 
    $j(this).fadeTo("fast", 1.0); } // Rollover at 100% 
    },function(){ 
     if(!$j(this).hasClass("hidden")){ 
    $j(this).fadeTo("fast", 0.8); } // Rollout at 80% 
    }); 

Maintenant, je ne comprends pas l'erreur de syntaxe et le vol stationnaire ne fonctionne que pour les éléments visibles!

:)

Merci à tous pour votre aide!

Answer 4

J'aime cet effet. Bon travail. Vous pouvez également adopter une approche différente avec la maçonnerie filtrante, ce qui fut le cas. Lors du filtrage, j'ai ajouté et retiré une classe cachée et rechargé la maçonnerie. Ainsi, les éléments se réarrangent lorsqu'ils sont filtrés ou retirés.

Voir: http://jasondaydesign.com/masonry_demo

Mais je suis en train de creuser vraiment votre effet, le seul être question est de savoir si vous avez une boîte vers le bas de la page avec un grand espace entre autre de la même catégorie. Une utilisation peut faire défiler certains, ne pas voir une boîte en surbrillance pendant un certain temps et ne pas le faire au bas de la page.