jQuery UI問題：爲什麼元素會在屏幕上飛行？

是的，我知道這個標題聽起來有點可疑。我會盡力解釋這個最好的，我可以...jQuery UI問題：爲什麼元素會在屏幕上飛行？

下面的代碼應該有藍色div滑到旁邊紅色div。（直接在右邊 - 使用jQuery UI的position()實用程序）第一次點擊Show the div按鈕時，它可以工作。另外，Hide the div的作品。

然後，當我再次點擊以顯示div時，它顯示在它應該在的位置的右側！爲什麼是這樣？！？

注：你可以找到的代碼here

<html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Demo</title> 
<style type='text/css'> 

#red { 
    background-color: red; 
    width: 200px; 
    height: 150px; 
    position: absolute; 
} 

#blue { 
    background-color: blue; 
    width: 150px; 
    height: 200px; 
    position: absolute; 
    display: none; 
} 

#tester_1 { 
    top: 300px; 
    left: 300px; 
    position: absolute; 
} 

#tester_2 { 
    top: 350px; 
    left: 300px; 
    position: absolute; 
} 

</style> 
</head> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jqueryui.js"></script> 
<script type='text/javascript'> 

function Show() 
{ 
    $('#blue').position({ 
      of: $('#red'), 
      my: 'left top', 
      at: 'right top'}).slideDown(); 
} 

function Hide() 
{ 
    $('#blue').hide(); 
} 

</script> 
<body> 
<div id='red'></div> 
<div id='blue'></div> 
<button id='tester_1' onclick='Show()'>Show the <kbd>div</kbd></button> 
<button id='tester_2' onclick='Hide()'>Hide the <kbd>div</kbd></button> 
</body> 
</html>

來源

2010-04-22 Nathan Osman

適用於Firefox 3.6，但不適用於IE8。 – Kobi 2010-04-22 04:52:21

在Chrome上不起作用。 – 2010-04-22 04:52:35

我在代碼中找到的唯一js腳本就是jQuery.js。你怎麼能說這是一個jQuery UI？請指導我我迷路了... – Reigel 2010-04-22 05:05:16

儘量只重置藍格......我這樣做，它似乎在Chrome和IE現在的工作。

function Hide() 
{ 
    $('#blue').css({ left: 0, top: 0 }).hide(); 
}

來源

2010-04-22 05:35:57 Mottie

它看起來像youre設法使用jQuery UI位置的活生生的例子，但你沒有引用它

http://jqueryui.com/demos/position/

來源

2010-04-22 05:00:27 Yisroel

我在標題中提到了jQuery UI ... – 2010-04-22 05:02:59

是的，但是jQuery UI並未包含在您的演示中。 – Yisroel 2010-04-22 05:03:58

Ooooooh耶。不，原因是我複製並粘貼了提供'position（）'的jQuery UI的小4kb，並將其粘貼到'jquery.js'的末尾。我可以看到混亂是在哪裏...... – 2010-04-22 05:05:34

function Show() 
{ 
    $('#blue').position({ 
      of: $('#red'), 
      my: 'left top', 
      at: 'right top'}) 
    .slideDown(); 
}

我不知道你的position的參數是什麼。
試圖削減，爲

function Show() 
    { 
     $('#blue').slideDown(); 
    }

，它會工作。

編輯

根據補充意見試試這個

$(function(){ 
    $('#blue').position({ 
      of: $('#red'), 
      my: 'left top', 
      at: 'right top'}) 
}) 
function Show() 
{ 
    $('#blue').slideDown(); 
} 

function Hide() 
{ 
    $('#blue').hide(); 
}

來源

2010-04-22 05:00:40 Reigel

對不起，我忘記提及整個事情的要點是，藍色的'div'應該在紅色'div'旁邊。本示例使用jQuery UI。 – 2010-04-22 05:02:21

見編輯請... – Reigel 2010-04-22 05:16:34

那裏。這似乎工作。不過，這是一個奇怪的錯誤。 – 2010-04-22 06:00:39

你做出（直接或通過jQuery UI）當該元件是隱藏的（使用顯示：無）任何測量是要得到0。這如果假設元件是可見的可導致有趣的結果。

在你的例子中，你定位的元素，當它不在顯示列表中，然後做slideDown()這就是導致問題的原因。

來源

2010-04-22 05:36:45

jQuery UI問題：爲什麼元素會在屏幕上飛行？

回答

相關問題