Jquery weird effect with fadeIn()

Question

When i click on that link, i want to append and fadeIn another element.

Problem is that the element fades in, very fast fades out and after that fades in back.

You can see here : 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 included in fiddle.

How can i make a nice fadeIn without that effect?

Answer 1

Try this:

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

Answer 2

That's because of CSS transitions used together with jQuery effects.

Removing this part of the CSS styles, solves the issue:

-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>