Can't clearInterval on animation

Question

I have some problem with this code, in this case i set div as a button, when I click the button everything is working as expected but when I want to stop animation with clearInterval it doesn’t work, just keeps looping... What I am doing wrong?

var timeout; 
var d1=$(".drum1");

function dani1(){
d1.animate({height:'150px', width:'150px', opacity:'0.4'},"slow");
d1.animate({height:'100px', width:'100px',opacity:'0.8'},"fast");
}

d1.click(function(){
if (!timeout){
    timeout = setInterval(dani1, 200);
} else {
     clearInterval(timeout);
     timeout = null;
   }
});

<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

Answer 1

You do not need setInterval at all..

var d1 = $(".drum1").data('end', true);

function dani1() {
  if (d1.data('end'))
    return d1.stop(true, true);
  
  d1.animate({
    height: '150px',
    width: '150px',
    opacity: '0.4'
  }, "slow")
    .animate({
    height: '100px',
    width: '100px',
    opacity: '0.8'
  }, "fast", dani1);
}

d1.click(function() {
 if (!d1.data('end'))
    d1.data('end', true);
 else {
    d1.data('end', false);
    dani1();
 }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

Answer 2

The problem is your usage of setInterval(), it will queue a lot of animations every 200ms so even after clearing the interval there are a lot of animations present in the animation queue.

One easy solution is to clear the animation queue also

var timeout;
var d1 = $(".drum1");

function dani1() {
  d1.animate({
    height: '150px',
    width: '150px',
    opacity: '0.4'
  }, "slow");
  d1.animate({
    height: '100px',
    width: '100px',
    opacity: '0.8'
  }, "fast");
}

d1.click(function() {
  if (!timeout) {
    timeout = setInterval(dani1, 200);
  } else {
    d1.stop(true, true)
    clearInterval(timeout);
    timeout = null;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

---

Without interval

var play;
var d1 = $(".drum1");

function dani1() {
  d1.animate({
    height: '150px',
    width: '150px',
    opacity: '0.4'
  }, "slow");
  d1.animate({
    height: '100px',
    width: '100px',
    opacity: '0.8'
  }, "fast");
  return d1.promise();
}

d1.click(function() {
  if (play) {
    play = false;
    d1.stop(true, true)
  } else {
    play = true;
    anim();
  }

  function anim() {
    dani1().done(function() {
      if (play === true) {
        anim();
      }
    })
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="drum1" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>