Disable and maintain click

Asked

Viewed 842 times

1

I got three columns in one of these

<td align="center" height="240" width="380" >
  <img src="imagens/modelo3_thumbnail.png" alt="" class="imagemModelo">                
</td>

In my JS, I want that when the user positions the mouse on top, call the event that makes the image size grow:

  $(".imagemModelo").hover(
    function(){$(this).animate({'width': '372px', 'height':'224px'}, 100);},   
    function(){$(this).animate({'width': '362px', 'height':'214px'}, 100);}
)

However, I would like when the user clicked on the image, that one kept the size, so I added the following after the Hover call:

.click(function(e){ 

        $(".imagemModelo").off("hover");
        ativaItemModelo($(this));

        e.preventDefault();
    }
);

function ativaItemModelo(modelo){
    modelo.css("width","372px");
    modelo.css("height","224px");
}

However it is not working, when the user takes the mouse it returns to normal size. I don’t know what else to do. I saw some answers on stackoverflow in English but none of the solutions worked out in the effect I wanted it to stay. Could you help me?

javascript jquery html

3 answers

1


I made an example with 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>

  • 1

    @Renan-Kaic-Lopes, you managed to solve the problem with the answer ?

  • 1

    I got Rafael. I manipulated his code to adapt with what I needed and I was able to do exactly what the boss wanted. Thank you very much!

0

You have to use the css together that right there. Hover is on account of css:

create a.css style file for example, or put in a < style tag >

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

And ready, because the click of one and Hover of the other are independent, already tested here and it works. See you more!

0

To disable Hover instead of using .off("hover") you have to use $(".imagemModelo").off('mouseenter mouseleave')

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

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.