jquery UI可调整大小，设置超时和清除超时

Question

您好我有jquery可调整大小功能或者回调问题，

基本上，div的扩展取决于它内部的图像，几秒钟之后就会崩溃。

我的目标是每当我触摸手柄时，应清除setTimeout并停止。因为现在每当我打开图像时它都会再次崩溃并且setTimeout仍然会运行。

并且窗口调整大小也不如我想要的那么顺畅。父容器应始终遵循图像高度..请参阅我的示例代码

<script type="text/javascript">

 $(function() {
  $(document).ready(function(){
   var imgMain = $(".img-pushdown"),
       frameTwo;

   imgMain.load(function(){
    var imageHeight = this.height,
    imageContainer = $("#pushdown-custom");

    function pushdown_collapse(){
     imageContainer.stop(true, false).animate({height:40},1000);
    }

    frameTwo = setTimeout(function(){
     pushdown_collapse();
    },10000);

    imageContainer.resizable({
     start: function( event, ui ) {
     clearTimeout(frameTwo);
    },
    handles: {'s': '#handle'},
    minHeight: 40,
    maxHeight: imageHeight
   });
  });
 });

$(window).on('resize', function(){
 $(".img-pushdown").trigger('load');
}).trigger('resize');
});

</script>

http://jsfiddle.net/yr3kdccm/