JQueryを使用して要素を非表示にした後で、leftプロパティを変更するにはどうすればよいですか？

Question

私が達成しようとしているのは、divを隠した後にleftプロパティのelemement（画像）を移動することです。

これを行うには、.promise()というJQueryの関数を使用します。ここに私のコードは次のとおりです。

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 

}); 

あなたがそれを証明できる

left要素を削除した後、画像を右に移動したいのですが（ピクセルを左に追加する必要があります）、左の要素が完全に削除されるまで待つ必要がありますなぜ私は.promise()関数を使用する理由）。

leftプロパティが変更されないため、.promise()はブラウザをブロックしているようです。

削除した要素が完全に非表示になった後で、要素のleftプロパティを変更するにはどうすればよいですか？

ありがとうございます！

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

：あなたはpromise()機能を使用して主張しますが、そうでなければ、あなたもこのように、隠ぺいが完了した後に呼び出されhide()機能、でコールバックを使用することができれば

Answer 1

わかりません「.promise（）メソッドは、コレクションにバインドされた特定のタイプのすべてのアクションは、キューに入れられたかどうか、一度に解決され、動的に生成された約束、終了しているが返されますFIDDLE

Answer 2

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