如何使jQuery.Resizeable的子元素在调整大小时移动

我正在使用一个可调整大小的JQuery向我的站点添加一个社交选项，我需要两个图像以按照重新调整大小的方向移动。现在，重新调整大小的工作只是我的两张社交图片从不移动，就像它们固定在文档中一样

--HTML

<div id="joinSocial" class="rcRT rcRB joinSocial ui-resizable" style="position: absolute; top: 407px; left: 0px; width: 76.72000026702881px;">

<img id="imgLk" src="/imgs/social/linkedin50x50.gif">
<img id="imgTw" src="/imgs/social/twitter50x50.gif">

<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>

</div>

--JavaScript

setTimeout(function() {

    var joinSocial = docCreateAttrs('div',{id:'joinSocial','class':'rcRT rcRB joinSocial',title:'Join the AlumCloud social network.'}),
        imgLk= docCreateAttrs('img',{id:'imgLk',src:'/imgs/social/linkedin50x50.gif'}),
        imgtw= docCreateAttrs('img',{id:'imgTw', src:'/imgs/social/twitter50x50.gif'});

    document.body.appendChild(joinSocial.addChilds([imgLk,imgtw]));

    $(joinSocial).resizable(
        {
            handles: "e"
        });
},1000);

--调整大小之前和之后

---

我需要将图像滑入视口的左侧部分并像父分区一样隐藏。

Waite，隐藏是什么意思？你的意思是调整大小以适应宽度，还是说当div到达触发点时，图像将被隐藏

如果您的意思是调整大小以适应宽度：

<img id="imgLk" src="/imgs/social/linkedin50x50.gif" width="100%">
<img id="imgTw" src="/imgs/social/twitter50x50.gif" width="100%">

如果您的意思是div resize触发一个将隐藏图像的点，请阅读：

你需要使用，我可能会把bug放进去，请理解它背后的想法：

$(joinSocial).resizable({
    resize: function( event, ui ) {
        if( ui.size.width < 20 ){ // the width you looking for
              $('#imgLk,#imgTw').hide();
        }else{
              $('#imgLk,#imgTw').show();
        }
    }
});

$（joinSocial）.可调整大小({
调整大小：函数（事件、ui）{
如果（ui.size.width<20）{//您要查找的宽度
$（'#imgLk，#imgTw'）.hide（）；
}否则{
$（'#imgLk，#imgTw'）.show（）；
}
}
});

我想将div设置为触发点，图像是否会隐藏？

.joinSocial img {
    display:block;
}

$(joinSocial).resizable({
    resize: function( event, ui ) {
        if( ui.size.width < 20 ){ // the width you looking for
              $('#imgLk,#imgTw').hide();
        }else{
              $('#imgLk,#imgTw').show();
        }
    }
});