jQuery Animate - jumps then

Question

Having an issue with a div content swap, where I want to animate in content then having it disappear if another element is clicked.

I have the content swap working correctly, but it "appears" without the animation. this happens for all elements upon first load. If you click the elements again, then the animation executes properly.

You can find my example here: https://jsfiddle.net/aebguh3k/7/

Sample code:

$(document).ready(function() {
  $('#select').on('click', 'a', function() {
    $('.current').not($(this).closest('a').addClass('current')).removeClass('current');
    $('.cselect:visible').hide().animate({
      opacity: '0.0'
    }, "slow");
    $('.cselect[id=' + $(this).attr('data-id') + ']').show().animate({
      opacity: '1.0'
    }, "slow");
  });
});

How can I fix the code so it animates properly

Answer 1

The opacity property is not added to your div, until the click handler is triggered. So there is anything that can be animated.

adding an initial style will help: https://jsfiddle.net/aebguh3k/8/

CSS:

.cselect {
  opacity: 0;  
}

JS:

$('.cselect:first').css({'opacity': '1'});