jquery - 使用 JQuery 隐藏元素后如何修改左属性？

Question

我想要实现的是在隐藏一个 div 后移动具有 left 属性的元素(图像)。

为此，我使用了 JQuery 的 .promise() 函数。这是我的代码:

HTML代码:

<div id="outerContainer">
  <div id="left"></div>
  <div id="container">
    <div id="div1" class="square red"></div>
    <div id="div2" class="square green">
      <img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded&a">
    </div>
    <div id="div3" class="square blue"></div>
  </div>
  <div id="right"></div>
</div>

CSS代码:

#outerContainer{
   display: flex;
   height: 100vh;
}

#left{
    display: block;
    width: 20%;
    border: solid 1px;
    border-color: #e0e0d1;
}

#container{
  display: flex;
    position: relative;
    flex-flow: row wrap;
    width: 100%;
    flex: 2;
}

#right{
    flex: 1;
    padding: 20px;
    width: 20%;
    background-color: #354551;
}
.red{
  background-color: red;
}

.green{
  background-color: green;
}

.blue{
  background-color: blue;
}

.square{
  flex: 1 0 10%;
    height: 50px;
}

#image{
  position: absolute;
    z-index: 1;
    width:50px; 
    height:50px;
    left: 30px;
}

#div2{
  position: relative;
}

JQuery代码:

$('#left').click(function() {
    $(this).hide();
});

$("#left").promise().done(function(){
     $("#image").css({left: "+=" + 30});
     //$("#image").css({left: "+=" + 30 + "px"}); Same behaviour as before

});

JSFiddle你可以在其中证明这一点。

删除 left 元素后，我想将图像 30px 向右移动更多(因此我必须在左侧添加像素)但我需要等到左边的元素被完全删除(这就是我使用 .promise() 函数的原因)。

似乎 .promise() 函数阻止了浏览器，因为 left 属性永远不会改变。

我删除的元素完全隐藏后，如何修改元素的左属性？

提前致谢!

Answer 1

$("#left").promise().done(function(){
   $("#image").css({left: $("#image").position().left + 30});
});