Keep active script click

Question

Keep active script click

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I was able to execute a script where when mouseover (hover) on a certain object, it performs the desired action, but I would like to execute the action with a click and I am not able to do either with Javascript or JQuery .. .

<script>
        $('.dimmer_area').hover(function(){
            $('.dim_area').fadeIn(200);
        },function(){
            $('.dim_area').fadeOut(200);
        });
    </script>

Can anyone help me?

javascript jquery

asked by anonymous 04.06.2018 / 22:34

2 answers

Set up my site's favicon Open a modal that comes from a different PHP page

score 1 · Answer 1

If you are using the same action, you can use .fadeToggle(200) , which is most appropriate for the situation, within a click event:

$('.dimmer_area').click(function(){
   $('.dim_area').fadeToggle(200);
});

.dimmer_area{
   width: 200px;
   height: 20px;
   background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="dimmer_area">clique aqui</div>
<div class="dim_area">dim_area</div>

score 0 · Answer 2

To do with click simply add a variable to help control the state, for example ...

let ativo = false;

$('.dimmer_area').click(function(){
            if(ativo)
            $('.dim_area').fadeIn(200);
            else
            $('.dim_area').fadeOut(200);
            
            ativo = !ativo;
        });

.dimmer_area {
  width: 200px;
  height: 100px;
  background: #424242;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dim_area {
  width: 100px;
  height: 50px;
  background: #ccc;
}

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