How to Find Out with Jquery If an Element Is Being Animated

How do I find out with jQuery if an element is being animated?

if( $(elem).is(':animated') ) {...}

More info: https://api.jquery.com/animated-selector/


Or:

$(elem)
.css('overflow' ,'hidden')
.animate({/*options*/}, function(){
// Callback function
$(this).css('overflow', 'auto');
};

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

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

How to check if DOM node is animating in jQuery

Try using the following:

$('div').on('click', '.item', function() {
$this = $(this); // cached so we don't wrap the same jquery object twice
if (!$this.is(':animated')) {
animate($this);
}
});

View: animated selector documentation

Demonstration: http://jsfiddle.net/smerny/tBDL8/1/

Determining if JQuery effects are still executing

You can check if element is used by some animation plugin/feature via checking :animated selector

according to this: http://api.jquery.com/animated-selector/

like this:

$("#el").is(":animated")

more info:
How do I find out with jQuery if an element is being animated?

Detecting if Anything on the Page is being Animated

All jQuery animation timers are stored in the array $.timers. One option is just to check whether length of $.timers property is more than zero:

if ($.timers.length > 0) {
// something is animating
}

Need an event when an element is being animated in jQuery

Basically, you could just add a class when you animate element:

$('.someElementsToAnimate').on('click', function(){
if($('.animating').length) return;
$(this).addClass('animating').animate({/*...*/}, function(){$(this).removeClass('animating');});
});

Looks like you are over complicating what you are looking for.

Of course, if you want more specific answer, you have to provide relevant code, what you didn't do in question.

Check if element is being animated CSS3

When you change the left property of an element, you can associate a boolean value with it (using data() for instance) and set it to true to indicate a transition has started. Then, you can bind to the transition end event (which varies depending on the browser) and set the boolean value back to false from your handler to indicate the transition has ended.

The end result is something like:

yourElement.on(
"transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
function() {
$(this).data("transitioning", false); // Transition has ended.
}
);

(Note the code above only has to run once.)


if (!yourElement.data("transitioning")) {
// No transition active, compute new position.
var theNewLeft = yourElement.position().left + 200;
// Set new position, which will start a new transition.
yourElement.data("transitioning", true).css("left", theNewLeft);
}

jQuery : check in an element is being animated

Yes it exists - http://api.jquery.com/animated-selector/

How do I find out with Mootools if an element is being animated?

One way that I often use is to check if animation is running with isRunning function:

// constructor
var fx = new Fx.Tween( ....

// later when I want to check if animation is running
if ( fx.isRunning() ) ...


Related Topics



Leave a reply



Submit