Tenho três colunas numa deste tipo
<td align="center" height="240" width="380" >
<img src="imagens/modelo3_thumbnail.png" alt="" class="imagemModelo">
</td>
No meu JS, quero que quando o usuário posicionar o mouse em cima, chame o evento que faz crescer o tamanho da imagem:
$(".imagemModelo").hover(
function(){$(this).animate({'width': '372px', 'height':'224px'}, 100);},
function(){$(this).animate({'width': '362px', 'height':'214px'}, 100);}
)
Entretanto, gostaria que quando o usuario clicasse na imagem, aquela se mantivesse com o tamanho, então adicionei o seguinte após a chamada do hover:
.click(function(e){
$(".imagemModelo").off("hover");
ativaItemModelo($(this));
e.preventDefault();
}
);
function ativaItemModelo(modelo){
modelo.css("width","372px");
modelo.css("height","224px");
}
Entretanto não está funcionando, quando o usuário tira o mouse ele volta ao tamanho normal. Não sei mais o que fazer. Vi umas respostas no stackoverflow em inglês mas nenhuma das soluções deram certo no efeito que eu queria que ficasse. Poderiam me ajudar?