Shake Animation won’t stop?

Question

I have a problem with the Animation shake, once it starts, I can’t make it stop

var shakeit = null;
function abre(a){
    clearInterval(shakeit);
}
function fecha(){
    var shakeit = setInterval(function(){
        $(".left_noti2").effect("shake",{direction:"up", distance:"5", times: "2"});
    }, 3000);
}

Once I press the button to close the div, I would like the button to have the shake effect, but as soon as it opens again, I would like it (function) to stop, but the code I have is not working, there is some solution?

Answer 1

The error is on the line var shakeit = setInterval(function(){, where you are setting a variable shakeit within the scope of the function fecha(), thus the function abre() do not have access.

It’s still working on:

var shakeit = null;

function abre() {
  clearInterval(shakeit);
}

function fecha() {
  shakeit = setInterval(function() {
    $(".left_noti2").effect("shake", {
      direction: "up",
      distance: "5",
      times: "2"
    });
  }, 3000);
}

$('#btnAbre').click(function() {
  abre();
});

$('#btnFecha').click(function() {
  fecha();
});

.left_noti2 {
  width: 200px;
  height: 200px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

<button type="button" id="btnAbre">Parar</button>
<button type="button" id="btnFecha">Agitar</button>

<div class="left_noti2"></div>