1

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?

3 Respostas 3

1

Fiz um exemplo com DIV's.

$(".divItem").hover(
  function() {
    if(! $(this).hasClass("clicked"))
      $( this ).animate({'width': '120px', 'height':'120px'}, 100);
}, function() {
    if(! $(this).hasClass("clicked"))
      $( this ).animate({'width': '100px', 'height':'100px'}, 100);
}
);

$(".divItem").click(function(){
  if($(this).hasClass("clicked"))
    $(this).removeClass("clicked");
  else
    $(this).addClass("clicked");
})
.divItem {
  height:100px;
  width:100px;
  border:1px solid #000;
  background:#00ff00;
  margin:5px;
}

.clicked {
  background:#00e000;
  height:120px;
  width:120px;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divItem"></div>
<div class="divItem"></div>
<div class="divItem"></div>

2
  • 1
    @renan-kaic-lopes, você conseguiu resolver o problema com a resposta ? Commented 6/09/2017 às 19:33
  • 1
    Consegui Rafael. Eu dei uma manipulada no seu codigo pra adaptar com o que eu precisava e consegui fazer certinho o que o chefe queria. Muito obrigado mesmo! Commented 8/09/2017 às 1:02
0

Você tem que usar o css junto que aí da certo. O hover é por conta do css:

cria um arquivo estilo.css por exemplo, ou coloque numa tag < style >

.imagemModelo:hover{
    'width': '372px';
    'height':'224px';
    transition-duration: 2s;
}

e pronto, porque o click de um e hover do outro são independentes, já testei aqui e funciona. Até mais!

0

Para desativar o hover em vez de usar .off("hover") você tem usar $(".imagemModelo").off('mouseenter mouseleave')

Ref: https://api.jquery.com/hover/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .