Tudor Tudor - 11 months ago 36
jQuery Question

Measuring css properties as applied by jQuery animation

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


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

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");

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