如何使jQuery的子元素.resizable移动调整大小

Question

我正在使用可调整大小的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>

- CSS

.joinSocial {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    width: 65px;
    height:125px !important;
    background-color: #fff;
    z-index: 25000;
    padding: .5em;
    padding-top: 1em;
}
.joinSocial img {
    position:relative;
    display:block;
    float:left;
}
.rcRT {
    border: 1px solid #c1bebe;
    -moz-border-radius-topRight: 10px;
    -webkit-border-top-right-radius: 10px;
    border-top-right-radius: 10px;
}
.rcRB {
    border: 1px solid #c1bebe;
    -moz-border-radius-bottomRight: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

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

- 调整大小前后

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

Answer 1

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

如果你的意思是调整宽度以适应宽度：

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

CSS

.joinSocial img {
    display:block;
}

如果您的意思是div调整大小会触发隐藏图像的点，请阅读：http://api.jqueryui.com/resizable/#event-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();
        }
    }
});