Jquery .fadein之前会影响容器

时间:2016-10-11 09:28:33

标签: jquery

我有一个神秘的问题:

<div class="ttbl0" id="msg0">Messages</div>
$(data).hide().fadeIn(1000).insertAfter("#msg0");
在这种情况下,

data是:

<div class="kld0">
    <div class="mbx24">
        <div class="wlls-t">
            <div class="row1">test1</div>
            <div class="row2">test2</div>
            <div class="row3">test3</div>
        </div>
    </div>
</div>

它工作正常,并在data容器之后插入msg0 fadeIn效果。问题是在data完成淡入后,容器msg0执行相同操作 - 它会消失并再次显示fadein效果。

我尝试使用append函数但遇到同样的问题 - 容器msg0消失并淡入。没有未关闭的标记可能会导致此问题。

不仅仅有一个容器。如果我创造更多:

<div class="ttbl0" id="msg0">Messages</div>
<div class="ttbl0">Messages</div>
<div class="ttbl0">Messages</div>
<div class="ttbl0">Messages</div>
所有这些都会消失并消失。

.ttbl0 { 
    width: 759px;
    font-weight: 700;
    padding: 10px;
    float: left;
    border-left: 1px solid #c4c4c4;
    border-right: 1px solid #c4c4c4;
}




$(document.body).on('submit','#sendmessage',function() {

var str = $(this).serialize();
$.ajax({
type: "POST",
url: "/send.php",
data: str,
success: function(data) {


$(data).hide().fadeIn(1000).insertAfter("#msg0");

}

});
return false;
});

1 个答案:

答案 0 :(得分:0)

容器ttbl0有float:left这就是问题所在。我改变了:

float:left

display:inline-block

问题已经消失。

向观看新帖子评分的用户发送消息:如果您继续这样做,您的网站将会失去访问者。获得负面评级而非问题解决方案真的很吵。