的jQuery了slideDown - 下滑超過所需，然後反向

這裏是我的代碼的jQuery了slideDown - 下滑超過所需，然後反向

$.get("insert-note.exec.php", {mess: messIn}, function(ajaxContent) { 
    if(ajaxContent != 0) {  
     $('#message-text').val(''); 
     $('#insert-flag').after(ajaxContent); 
     $('#insert-flag').next('.message-bubble').slideDown('slow'); 
    } 
});

CSS部分

#message-text { 
padding:4px; 
outline:none; 
color:#FFF; 
border:3px solid #101010; 
background-color:#FFF; 
border-radius:6px; 
-moz-border-radius:6px; 
}  

.message-bubble { 
width:92%; 
padding:1.50%; 
margin-bottom:2%; 
letter-spacing:1px; 
border-radius:8px; 
overflow:hidden; 
cursor:pointer; 
-moz-border-radius:8px; 
background-color:#FFF; 
-moz-box-shadow: 1px 1px 1px #FFF; 
-webkit-box-shadow: 1px 1px 1px #FFF; 
box-shadow: 1px 1px 1px #FFF; 
} 

#insert-flag { 
    width:0; 
    height:0; 
}

總之，我試圖從服務器是獲取數據（AJAX）作爲div返回，我試圖將div滑入當前界面。

問題：這一切都按預期工作，除了新的div滑得有點低，然後恢復到適當的大小。

例如：對於3線格，該效應導致的初始slideDown，讓說，5-線，然後類似於的slideUp一個效果自行調整至適當的3-線。

我該如何處理？

（注：類似的效果，可以在Loopt可以看出，當新的內容推其正常工作）

來源

2011-09-15 jagan

我沒有看到的JavaScript/jQuery的任何問題。我懷疑問題可能出現在你正在使用的元素的CSS中。你可以發佈嗎？ – joshb

@joshb新增css部分 – jagan

聽起來像你的jQuery在檢測元素高度時遇到問題。我認爲這可能會稍微延遲一些。這意味着，jQuery將有足夠的時間來理解你的元素和* buffer *。然後顯示它。 –

這是jQuery的幻燈片方法中相當有名的bug。它發生在div滑動時沒有確定的高度。也許使用評論中建議的.delay（）將會起作用。但另一個可能更強大的解決方案是，您首先讓div填充響應數據，其格式爲position:absolute; visibility:hidden。這將允許你在沒有用戶最初看到內容的情況下獲得div的高度。

因此，像：

<style> 
.message-bubble {position:absolute; visibility:hidden} 
</style> 

<script> 
$.get("insert-note.exec.php", {mess: messIn}, function(ajaxContent) { 
    if(ajaxContent != 0) {  
     $('#message-text').val(''); 
     $('#insert-flag').after(ajaxContent); 
     var newContent = $('#insert-flag').next('.message-bubble'); 

    //set an inline style attribute to the correct height, and prepare the div for slideDown() 
     newContent.css({ 
      height:newContent.height() + 'px', 
      display:'none', 
      visibility:'visible' 
      position:'relative', 
     }); 
     newContent.slideDown('slow'); 
    } 
}); 
</script>

來源

2011-09-15 16:28:14 maxedison

我已經嘗試過你的建議，但事情似乎只能在'高度：'屬性設置時工作正常。否則，沒有什麼可以獲得的。 – jagan

嗯......這正是我的觀點。這就是爲什麼我最初將div設置爲具有可見性：隱藏（以便高度可以動態計算）和絕對位置（以便隱藏的div不會影響佈局流程）。一旦完成，div被改變爲可見的可見性，不顯示none和相對位置（即，將div重置爲所需的真實屬性）。但從前一步，我們也能夠定義正確的高度，消除跳動。 – maxedison

大多數的jQuery是神經質的案件都涉及到元件的尺寸。 JQuery基本上不了解元素結束的地方。 SlideDown基本上會繼續，直到「OH NO！」我走得太遠，然後糾正它。

我不太確定，哪個元素是您的案例中的主要容器。但是您必須添加實心寬度或高度值。如果你把它們滑下來，那麼最重要的部分就是高度。如果你的容器內容是動態的，這可能會很煩人，但它肯定會解決你的問題。當然，總有一個機會沒有。在這種情況下，發佈更多的代碼，所以我們可以尋找更加本地化的問題。

此外它可能與您的填充和width: 92%;有關。出於調試目的，我建議嘗試刪除填充和％寬度。你也可以通過display: block; + padding: ...;實現你的「一點一點，然後100％」。

來源

2011-09-15 16:23:04

沒有爲CSS設置'height'屬性不起作用 – jagan

什麼不行？我的答案點是元素的高度 - 高度。如果它通過設置高度屬性起作用，那麼我是正確的。但是，如果你想讓元素內容更加動態化..並沒有一個靜態的高度，那麼你必須尋找更先進的解決方案。正如我所說，這個問題可能在任何地方..你可以開始通過包括您的示例網站.. –

的jQuery了slideDown - 下滑超過所需，然後反向

回答

相關問題