Tudor Tudor - 5 months ago 5
jQuery Question

Measuring css properties as applied by jQuery animation

Let's say there's a div that has a fadeToggle method going on:

$('.someDiv').fadeToggle(500);


This has an opacity animation that lasts 500ms, preceded and followed by a 'display' css property change (from 'none' to 'block' and viceversa). It adds these properties in the DOM, if I'm not mistaken.

Could I measure or check those properties as they happen, like so?

if ($('.someDiv').css("opacity") != "1"){
//Do Something
}


I tried and it seems to have no effect.

Ian Ian
Answer

You can use setInterval before calling the fadeToggle, and then use a callback to clear it.

$('.someDiv').click(function() {
    var interval = setInterval(opacityTrace,1);
    $('.someDiv').fadeToggle(500,function() { clearInterval(interval) });
});

function opacityTrace() {
    var currentOpacity = $('.someDiv').css("opacity");
    $(".opacityTrace").append(currentOpacity+"<br/>");
}

Example fiddle here https://jsfiddle.net/jdcejscn/1/