jquery - 如何使 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);

--调整大小前后

我需要将图像滑入视口(viewport)的左侧部分并像其父 div 一样隐藏。

Answer 1

等等，隐藏是什么意思？你的意思是调整大小以适合宽度，还是说当 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 resize 触发一个会隐藏图像的点，请阅读: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();
        }
    }
});