JQuery странный эффект с fadeIn()

Question

Когда я нажимаю на эту ссылку, я хочу добавить и fadeIn другой элемент.

Проблема в том, что элемент затухает, очень быстро исчезает и после этого исчезает сзади.

Вы можете увидеть здесь: http://jsfiddle.net/yfae3y11/1/

HTML

<div id="boxpms"> 
    <a class="pms" href="#" title="0 messages" >click 
    <span id='pms_number' >0</span></a> 
</div> 

JQuery

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

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

}); 

CSS включены в скрипку.

Как я могу сделать хороший fadeIn без этого эффекта?

Answer 1

Это из-за переходов 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').click(function(e) { 
 

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

 
});

#boxpms { 
 
    position: relative; 
 
    display: inline; 
 
} 
 
#pms_number { 
 
    position: absolute; 
 
    margin-left: -11px; 
 
    font-size: 13px; 
 
    margin-top: -4px; 
 
    color: white; 
 
} 
 
#messages_box { 
 
    display: table; 
 
    z-index: 1001; 
 
    position: absolute; 
 
    top: 28px; 
 
    background: #FFFFFF; 
 
    border: 1px solid; 
 
    border-color: #777 #6c6c6C#666; 
 
    border-radius: 5px; 
 
    transition-property: opacity, padding, visibility; 
 
    background-image: -webkit-linear-gradient(top, #FFFFFF, #FFFFFF); 
 
    background-image: -moz-linear-gradient(top, #FFFFFF, #FFFFFF); 
 
    background-image: -o-linear-gradient(top, #FFFFFF, #FFFFFF); 
 
    background-image: linear-gradient(to bottom, #FFFFFF, #FFFFFF); 
 
    -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1); 
 
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(0, 0, 0, 0.1); 
 
    padding: 8px 12px 8px 8px; 
 
    vertical-align: baseline; 
 
    zoom: 1; 
 
} 
 
#messages_box { 
 
    left: -9px; 
 
} 
 
ol, 
 
ul { 
 
    list-style: none; 
 
} 
 
#messages_box ul:before { 
 
    bottom: 27px; 
 
    border-top: 7px solid #555; 
 
} 
 
#messages_box ul:before, 
 
#messages_box ul:after, 
 
#messages_box li:first-child:after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 10px; 
 
    width: 0; 
 
    height: 0; 
 
    border: 7px outset transparent; 
 
    transform: rotate(180deg); 
 
    top: -13px; 
 
} 
 
#messages_box ul:after { 
 
    bottom: 27px; 
 
    border-top: 7px solid #d9e3fa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="boxpms"> 
 
    <a class="pms" href="#" title="0 messages">click 
 
     <span id='pms_number' >0</span></a> 
 
</div>

Answer 2

Попробуйте это:

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

jsFiddle