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

Answer 2

不确定您是否坚持使用promise()函数，但如果没有，您还可以在hide()函数中使用回调，该函数在隐藏完成后调用，如下所示：

$('#left').click(function() {
    $(this).hide(0, function()
    {
        $("#image").css({left: "+=" + 30}); 
    });
});

FIDDLE

在使用JQuery隐藏元素后，如何修改left属性？

2 个答案: