1

これが私のコードです

$.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;
}

つまり、サーバーから div として返されるデータ (ajax) を取得しようとしており、div を現在のインターフェイスにスライドさせようとしています。

問題: 新しい div が少し余分にスライドして適切なサイズに戻ることを除いて、すべて期待どおりに機能します。

例: 3 行の div の場合、効果は、たとえば 5 行の頭文字になり、適切な 3 行に調整するslideDown効果に似ています。slideUp

どうすればこれを処理できますか?

(注:新しいコンテンツがプッシュされたときに適切に動作するLooptでも同様の効果が見られます)

4

2 に答える 2

1

これは、jQuery のスライド メソッドに関するよく知られたバグです。スライドされている 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-15T16:28:14.180 に答える
0

jQuery がびくびくするほとんどのケースは、要素のサイズに関連しています。JQuery は基本的に、要素がどこで終了するかを理解していません。SlideDown は基本的に、「ああ、いや！」となるまで続きます。私は行き過ぎました..それからそれを修正します。

あなたの場合、どの要素がメインコンテナであるかはよくわかりません。ただし、実線の幅または高さの値を追加する必要があります。それらを下にスライドさせる場合、最も重要な部分は高さです。コンテナーのコンテンツが動的である場合、これはかなり面倒かもしれませんが、問題は確実に解決されます。もちろん、そうでない可能性は常にあります。その場合は、より多くのコードを公開して、よりローカライズされた問題を探すことができます。

また、パディングとに関連している可能性がありますwidth: 92%;。デバッグの目的で、パディングと %-width を削除することをお勧めします。display: block;また、 +を使用すると、「少し少ない場合は 100%」を達成できますpadding: ...;。

于 2011-09-15T16:23:04.840 に答える