CODEWITHSUNDEEP
javascriptjquery
Tom
Tom

Reputation: 83

How to know that which animation is currently running on an element using jquery or javascript

Please tell what should be code for know_anim() function to know the current animation executing on '#div' element.

jsFiddle link:https://jsfiddle.net/himavicii/bL0nsjeL/

 function l()
            {
               $('#div').animate({'left':'20px'},10000);//1st animation queued after 1sec
            }
    function r()
            {
               $('#div').animate({'top':'100px'},10000);//after 2sec this animation queued
            }
    setTimeout(function(){l();},1000);
    setTimeout(function(){r();},2000);

        function know_anim()
        {
          //Code to detect which animation is currently executing at 
           the time of call to this function
        }

Upvotes: 1

Views: 1421

Answers (3)

Meiko Rachimow
Meiko Rachimow

Reputation: 4724

Here a solution which works for animations running concurrently too. The start and done callbacks you can set in the options are used to edit a global object (actualAnimations).

var actualAnimations = {};
function l()
{
    $('#div').animate({'left':'20px'},
        {
            duration: 10000,
            start: function(){actualAnimations['l'] = true;},
            done: function(){delete actualAnimations['l'];},
            queue: false
        });//1st animation queued after 1sec
}
function r()
{
    $('#div').animate({'top':'100px'},
        {
            duration: 10000,
            start: function(){actualAnimations['r'] = true;},
            done: function(){delete actualAnimations['r'];},
            queue: false
        });///after 2sec this animation queued
}
setTimeout(function(){l();},1);
setTimeout(function(){r();},3000);

function know_anim()
{
    //Code to detect which animation is currently executing at
    console.log(actualAnimations);
    $('#anims').text(JSON.stringify(actualAnimations));
}
setInterval(know_anim, 100);
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<div style="position: absolute; left: 50px; top:20px;">
    <div id="div" style="position: relative; left: 50px;">animated div</div>
</div>
<div>
    Actual animation: <span id="anims"></span>
</div>

Upvotes: 2

Brian Pursley
Brian Pursley

Reputation: 1196

Probably the easiest and most straightforward way would be to set a data attribute on your div when the animation starts and remove it when the animation ends. Then you can just check that attribute to see which animation is currently running on that div at any given time.

Check this updated jsfiddle: https://jsfiddle.net/bpursley/hq6bn1fs/

html:

<body>
  <div id="div"></div>
  <div id="output"></div>
  <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
</body>

and javascript:

$(function(){
  function l()
  {
    $('#div').animate({ left: '200px' },
    {
      duration: 5000,
      start: function() { $(this).data('animation', 1); },
      complete: function() { $(this).removeData('animation'); }
    }); 
  }
  function r()
  {
    $('#div').animate({ top: '100px' },
    {
      duration: 5000,
      start: function() { $(this).data('animation', 2); },
      complete: function() { $(this).removeData('animation'); }
    });
  }
  function know_anim() {
    return $('#div').data('animation');
  }

  setTimeout(function(){l();},1000);
  setTimeout(function(){r();},2000);
  setInterval(function() { $('#output').text('animation is currently ' + know_anim()); })
});

Upvotes: 4

Rohit Agre
Rohit Agre

Reputation: 1528

You may have to declare a global function to check which animation is running. check this updated fiddle https://jsfiddle.net/bL0nsjeL/3/

$(function() {
  var anims = {
    l: false,
    r: false
  }

  function l() {
    anims.l = true
    $('#div').animate({
      'left': '200px'
    }, 5000, function() {
      anims.l = false
    }); //1st animation queued after 1sec
  }

  function r() {
    anims.r = true
    $('#div').animate({
      'top': '100px'
    }, 5000, function() {
      anims.r = false
    }); //after 2sec this animation queued
  }
  setTimeout(function() {
    l();
  }, 1000);
  setTimeout(function() {
    r();
  }, 2000);

  function know_anim() {
    return anims;
  }
});

when you fire know_anim() you will get an object which will have true for whichever or animation is currently running

Upvotes: 0

Related Questions