CSSプロパティの値が変更されるたびにjQueryを実行したいです。

Question

前提・実現したいこと

jQueryを使用して、親要素のCSSプロパティの値が変更されるたびに子要素にクラスを追加したいです。

ソース

<ul id="hoge" style="left:XXpx">
<li></li>
<li></li>
<li></li>
</ul>

上記のulタグのleftが２秒ごとに-500pxまで変化し、その後0に戻ります。
leftの値が変わっている時のみliに対してクラスを追加したいです。

試したこと

$('ul#hoge').on('DOMSubtreeModified propertychange', function() {

上記を利用して監視をしたところ、leftの値が変化しきった後にクラスが追加されてしまい、実現したい動作と異なる動作になってしまいました。

Comments

[gogojp]

「leftが2秒ごとに変化し」のコードの追記お願いします。
leftの値変更をJavaScriptでやっているのなら、イベントで監視するより値を変えるタイミングでliにクラス追加すればいいのではないかと思ったのですが。

[yambejp]

「２秒ごとに-500pxまで変化し」も
・2秒ごとにnドットずつ変化するのか
・2秒間かけて-500pxまで変化するのか
判断つきません。
質問者さんの言い回しだと前者になりますがふつうは後者ですよね？

[NaokiTanizawa]

leftの値変更はプラグインで行われており、私の知識ではプラグインのコードの編集が難しい状況になります。

Answer 1

２秒ごとに-500pxまで変化し

が、すごく怪しいですが、変化が始まって一定時間変化がなければ終了したと推定すればこう

<style>
.active{background-Color:lime}
</style>
<script>
var timerId;
$(function(){
  var mo = new MutationObserver(function(r){
    clearTimeout(timerId);
    $(r[0].target).addClass('active');
    timerId=setTimeout(function(){
      $(r[0].target).removeClass('active');
    },100);
  });
  var opt = {
  attributes: true,
  attributeFilter:['style'],
  };
  mo.observe($('#hoge').get(0), opt);
  $('#btn').on('click',function(){
    $('#hoge').animate({marginLeft:200},1000).animate({marginLeft:0},1000);
  });
});
</script>
<ul id="hoge">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<input type="button" value="change" id="btn">