Wie man weiß, welche Animation gerade auf einem Element mit jquery oder javascript läuft

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 
     }

Quelle

2016-04-10 Tom

Sie könnten Animationsoptionen aus der Warteschlange zum Laufen bringen, aber diese so bessere Option nicht öffentlich dokumentiert ist ist es manuell wie in der angenommenen Antwort unten zu handhaben. Hier erhalten Sie die Idee: https://jsfiddle.net/bL0nsjeL/4/ –

wahrscheinlich einfachste und direkteste Weg wäre, ein Datenattribut auf div zu setzen, wenn die Animation beginnt und es zu entfernen, wenn die Animation endet. Dann können Sie einfach dieses Attribut überprüfen, um zu sehen, welche Animation gerade in diesem Bereich läuft.

prüfen diese aktualisiert 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>

und 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()); }) 
});

Quelle

2016-04-10 13:22:01 bpursley

Um gleichzeitige Animationen zu behandeln (wenn nicht die fx-Warteschlange verwendet wird): https://jsfiddle.net/hq6bn1fs/3/ –

können Sie haben eine globale Funktion zu erklären, zu prüfen, welche Animation läuft. Check diese aktualisierte Geige 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; 
    } 
});

wenn Sie know_anim() Feuer werden Sie ein Objekt erhalten, die true für welche auch immer oder Animation hat derzeit

Quelle

2016-04-10 13:09:13

Hier ist eine Lösung, die gleichzeitig laufen zu für Animationen arbeitet aktiv. Die start und done Rückrufe, die Sie in options festlegen können, werden zum Bearbeiten eines globalen Objekts (actualAnimations) verwendet.

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>

Quelle

2016-04-10 13:14:48

Wie man weiß, welche Animation gerade auf einem Element mit jquery oder javascript läuft

Antwort

Verwandte Themen