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

我试图实现它是在隐藏div后移动一个具有left属性的元素（图像）。如何在使用JQuery隐藏元素后修改左侧属性？

为此，我使用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/[email protected]?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属性永远不会改变。

如何修改一个元素的左边属性，然后我已经移除的元素被完全隐藏了？

在此先感谢！

来源

2016-04-25 Francisco Romero

“的.promise（）方法返回一个动态生成的承诺，解决一旦某种类型绑定到收集，所有操作排队与否，已经结束了。默认情况下，类型是“fx”，这意味着当所选元素的所有动画完成时，返回的Promise将被解析。“ – j08691

@ j08691但是在这里我只有'.hide（）'函数影响到'left' div。我认为那之后就完成了。 –

不知道，如果你坚持使用promise()功能，但如果没有，你也可以使用一个回调在hide()功能，这就是所谓的藏身完成后，像这样：

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

FIDDLE

来源

2016-04-25 15:11:39 ZiNNED

不，我没有坚持使用'.promise（）'函数。感谢您提供不使用任何功能的解决方案！ –

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

来源

2016-04-25 15:06:25 0x3a2d29

我想要的是在隐藏左侧div后移动图像。在隐藏div之前不要移动它。无论如何，谢谢你回答这个问题！ –

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

回答

相关问题