JQuery Ui Resizable用于旧版本，不再用于新版本

Question

我有一个问题，当你向右拉伸红色矩形时，它会以40个间隔从20到100，20-60-100 ..然后当你收缩它时它会正确地返回，100- 60-20，但黑色矩形，向左延伸，正确地20-60-100正确，但当它缩小时，它失败，因为它是100-60-40而不是回到20，它适用于以前的版本，这是一个错误还是我做错了什么？以下是工作版本和非工作版本的示例。

旧版本jquery ui（v1.10.1）工作：

$(document).ready(function() {

  $("#demo").resizable({
    handles: 'e',
    grid: [40, 0],
    minWidth: 20,
    maxWidth:100,
    stop:function( event, ui ) {
      $('#res1').text($(this).width());
    }
  });
  
  $("#demo2").resizable({
    handles: 'w',
    grid: [40, 0],
    minWidth: 20,
    maxWidth:100,
    stop:function( event, ui ) {
      $('#res2').text($(this).width());
    }
  });

});

body {
  padding: 50px;
}

.row{
  padding:20px;  
}

#demo {
  display: block;
  width: 20px;
  height: 50px;
  line-height: 50px;
  background-color: #F00;
  left: 100px;
  text-align:center;
  color:#FFF
}

#demo2 {
  display: block;
  width: 20px;
  height: 50px;
  line-height: 50px;
  background-color: #000;
  left: 100px;
  text-align:center;
  color:#FFF
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.10.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="row">
<div id="demo"></div><span id="res1">20</span>
</div>
<div class="row">
<div id="demo2"></div><span id="res2">20</span>
</div>

新版本jquery ui（v1.11.4）无效：

$(document).ready(function() {

  $("#demo").resizable({
    handles: 'e',
    grid: [40, 0],
    minWidth: 20,
    maxWidth:100,
    stop:function( event, ui ) {
      $('#res1').text($(this).width());
    }
  });
  
  $("#demo2").resizable({
    handles: 'w',
    grid: [40, 0],
    minWidth: 20,
    maxWidth:100,
    stop:function( event, ui ) {
      $('#res2').text($(this).width());
    }
  });

});

body {
  padding: 50px;
}

.row{
  padding:20px;  
}

#demo {
  display: block;
  width: 20px;
  height: 50px;
  line-height: 50px;
  background-color: #F00;
  left: 100px;
  text-align:center;
  color:#FFF
}

#demo2 {
  display: block;
  width: 20px;
  height: 50px;
  line-height: 50px;
  background-color: #000;
  left: 100px;
  text-align:center;
  color:#FFF
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="row">
<div id="demo"></div><span id="res1">20</span>
</div>
<div class="row">
<div id="demo2"></div><span id="res2">20</span>
</div>