jQuery hover animer & cliquer problème

Question

avoir une liste d'images comme une navigation. lorsque vous passez la souris sur eux, une div avec un fond transparent glisse vers le haut. quand vous faites flotter la div glisse vers le bas.

cette partie s'est réveillée comme un charme. Maintenant, lorsque vous cliquez sur l'image ou le titre, la div avec le titre change son opacité à 1, se déplace vers le haut de l'image et gagne 100% de hauteur. Le problème est lorsque je passe la souris sur le div de titre à nouveau. alors comment puis-je arrêter l'effet de hover out sur clic?

j'ai déjà essayé une vue des solutions aux problèmes semblables mais n'ai pas commencé à travailler .. je suis assez nouveau à jQuery ainsi n'importe quelle aide serait appriciated.

voici le code à ce jour avec un essai en utilisant .unbind:

var thumbslide = $('.boxgrid.captionfull').hover(
    function() { //Hover over 
     $(this).children('.cover').stop().animate({'top':'130px'},{queue:false,duration:350}); 
    },function() { //Hover out 
     $(this).children('.cover').stop().animate({'top':'230px'},{queue:false,duration:350}); 
    } 
    ).click(function() { 
     $(this).children('.cover').stop().animate({'top':'0px', height:"230px", opacity:"1"},{queue:false,duration:350}).unbind('mouseleave'); 
}); 

Answer 1

C'est parce que vous êtes les délier enfants, pas l'élément que vous êtes. Réorganisez-le comme ceci:

$(this).unbind('mouseleave').children('.cover').stop().animate({'top':'0px', height:"230px", opacity:"1"},{queue:false,duration:350}); 

Answer 2

vous pouvez simplement vérifier l'opacité ou Largeur en vol stationnaire hors ...

dans le vol stationnaire hors fonction que vous faites

if($(this).children('.cover').css('opacity')!=1){ 
$(this).children('.cover').stop().animate({'top':'230px'},{queue:false,duration:350}); 
}