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，效果会产生一个初始slideDown值，比如说 5 行，然后类似于将slideUp自身调整为适当的 3 行的效果。

我该如何处理？

（注意：在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 回答