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

Когда я нажимаю на эту ссылку, я хочу добавить и 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 включен в fiddle.

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

2 2
jquery fadein

2 ответа:

Это связано с переходами 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>
1

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

$('.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

0