使用jquery顯示功能時div座標改變

我有兩個div點擊第一次潛水導致第二個div的切換。使用jquery顯示功能時div座標改變

#a{ border:1px solid red;width:400px;margin:50px;} 
#b{position:absolute;border:1px green solid; width:400px;top:150px;}

和

<div id="a">AAAAAAAAAAAA</div><div id="b">BBBBBB</div><div id="test" >Write Cordinates here</div> 
$("#a").click(function(){ 
    var burasi = $(this).offset(); 
    var tepe=burasi.top + $(this).outerHeight(true); 
    var ici = $("#b"); 
    ici.offset({top: tepe, left: burasi.left}); 
    window.console.log({top: tepe, left: burasi.left}); 
    $("#test").html("top: "+tepe+", left: "+burasi.left); 
    ici.fadeToggle("slow");  
})

As here。當A被點擊時，切換被執行得非常好，但是當B要顯示其座標被改變時。我怎樣才能防止它，並在同一地點使div B？

來源

2015-01-04 Huseyin

ici.offset（{頂：山丘，左：burasi.left}）;需要我的代碼。我將我的整個問題總結爲這些代碼。帶「A」標識的Div是任何必須在底部顯示B的圖標。所以這行（ici.offset）對我的代碼是必不可少的。 – Huseyin

閱讀本http://gabrieleromanato.name/jquery-bug-with-offsets-positioning-and-hidden-elements/

你能避免通過運行切換抵消之前

$("#a").click(function(){ 
    var burasi = $(this).offset(); 
    var tepe=burasi.top + $(this).outerHeight(true); 
    var ici = $("#b"); 
    ici.fadeToggle("slow"); 
    ici.offset({top: tepe, left: burasi.left}); 
    $("#test").html("top: "+tepe+", left: "+burasi.left); 
});

見DEMO

來源

2015-01-04 01:27:48

這是一個解決方案。但我不明白爲什麼它是準確的？ Jquery中有沒有錯誤？ – Huseyin

沒有錯誤。正如我在我的回答中解釋的那樣，這是因爲你試圖移動一個隱藏的對象。請注意，此答案中的用戶所做的只是在僅顯示對象時才移動該對象。 –

@Huseyin對不起，重播延遲..路易斯是正確的移動一個隱藏的對象我只是試圖移動只是當可見..你可以使用fadeToggle之前使用偏移像http://jsfiddle.net/7hLypdnr/5/或使用animate（）而不是偏移像http://jsfiddle.net/7hLypdnr/7/ –

你可以僅僅刪除ici.offset({top: tepe, left: burasi.left});因爲這是情況正在發生變化的位置就行了。文檔準備就緒時放置元素，然後根本不會移動元素。當你使用你的實際代碼時它移動的原因是你試圖設置隱藏元素的偏移量。看看這個答案在StackOverflow中談到它：jquery: get the offset of hidden element

正如我所提到的，雖然，我用$（document）.ready（）來解決它。這裏是我的代碼：

$("#a").click(function(){ 
    var burasi = $(this).offset(); 
    var tepe=burasi.top + $(this).outerHeight(true); 
    var ici = $("#b"); 
    ici.offset({top: tepe, left: burasi.left}); 
    window.console.log({top: tepe, left: burasi.left}); 
    $("#test").html("top: "+tepe+", left: "+burasi.left); 
    ici.fadeToggle("slow"); 

});

隨時檢查它在這裏工作：http://jsfiddle.net/lrojas94/7hLypdnr/2/

來源

2015-01-04 01:46:53

當座標第一次計算出來就OK了。在第二次計算時，它會出錯。 – Huseyin

通過.show（）顯示，然後使用.offset（）解決問題。 upvote爲我提出新的想法。 – Huseyin

謝謝:)這是我在帖子中提到的鏈接，雖然:) –

使用jquery顯示功能時div座標改變

回答

相關問題