Jquery与fadeIn（）的奇怪效果

当我点击该链接时，我想附加并淡入另一个元素

问题是元素会淡入淡出，很快就会淡出，然后又会在后面淡出

你可以在这里看到：

HTML

jquery

$('.pms').click(function(e){

$('<div id=\'messages_box\'><ul><li>test</li></ul></div>').hide().appendTo('#boxpms').fadeIn('slow');
e.preventDefault();                     

});

$（'.pms'）。单击（函数（e）{
$（'ul>
测试
）.hide（）.appendTo（'boxpms'）.fadeIn（'slow'）；
e、 预防默认值（）；
});

css包含在fiddle中

---

如果没有这种效果，我如何制作一个漂亮的fadeIn？

这是因为CSS转换与jQuery效果一起使用

删除这部分CSS样式可以解决以下问题：

-webkit-transition: 0.2s ease-out;
-moz-transition: 0.2s ease-out;
-o-transition: 0.2s ease-out;
transition: 0.2s ease-out;
-webkit-transition-property: opacity, padding, visibility;
-moz-transition-property: opacity, padding, visibility;
-o-transition-property: opacity, padding, visibility;
transition-property: opacity, padding, visibility;

---

$（'.pms'）。单击（函数（e）{
$（'ul>
测试
）.hide（）.appendTo（'boxpms'）.fadeIn（'slow'）；
e、 预防默认值（）；
});
#boxpms{
位置：相对位置；
显示：内联；
}
#pms_编号{
位置：绝对位置；
左边距：-11px；
字体大小：13px；
利润上限：-4px；
颜色：白色；
}
#留言箱{
显示：表格；
z指数：1001；
位置：绝对位置；
顶部：28px；
背景：#FFFFFF；
边框：1px实心；
边框颜色：777#6C6C#666；
边界半径：5px；
过渡属性：不透明度、填充、可见性；
背景图像：-webkit线性渐变（顶部，#FFFFFF，#FFFFFF）；
背景图像：-moz线性梯度（顶部，#FFFFFF，#FFFFFF）；
背景图像：-o-线性梯度（顶部，#FFFFFF，#FFFFFF）；
背景图像：线性渐变（到底部，#FFFFFF，#FFFFFF）；
-webkit盒阴影：插入0 0 0 1px rgba（255，255，255，0.9），0 1px 2px rgba（0，0，0.1）；
框阴影：插入0 0 0 1px rgba（255，255，0.9），0 1px 2px rgba（0，0，0，0.1）；
填充：8px 12px 8px 8px；
垂直对齐：基线；
缩放：1；
}
#留言箱{
左：-9px；
}
ol,，
保险商实验室{
列表样式：无；
}
#信息盒ul：之前{
底部：27px；
边框顶部：7px实心#555；
}
#信息箱ul：之前，
#信息箱ul：之后，
#留言箱李：第一个孩子：之后{
内容：''；
显示：块；
位置：绝对位置；
左：10px；
宽度：0；
身高：0；
边框：7px透明；
变换：旋转（180度）；
顶部：-13px；
}
#信息框ul：之后{
底部：27px；
边框顶部：7px实心#d9e3fa；
}

试试这个：

$('.pms').click(function(e){
var message = $('<div id=\'messages_box\'><ul><li>test</li></ul></div>');
$(message).fadeIn('slow');
$(message).appendTo('#boxpms');
e.preventDefault();                     
});

$（'.pms'）。单击（函数（e）{
var消息=$（“
测试”
”）；
$（message.fadeIn（'slow'）；
$（消息）.appendTo（“#boxpms”）；
e、 预防默认值（）；
});

非常感谢，先生。我会在9分钟内接受你的回答。@nikodemus不客气。我对你的两个问题投了赞成票，所以你也可以对帖子投赞成票。：-）谢谢
$('.pms').click(function(e){
var message = $('<div id=\'messages_box\'><ul><li>test</li></ul></div>');
$(message).fadeIn('slow');
$(message).appendTo('#boxpms');
e.preventDefault();                     
});