然后jQuery动画跳跃

Question

有一个div内容交换的问题，我想在其中动画的内容，然后让它消失，如果另一个元素被点击。

我的内容交换正常工作，但它“出现”没有动画。在第一次加载时，所有元素都会出现这种情况。如果再次单击元素，则动画将正确执行。

您可以在这里找到我的示例：https://jsfiddle.net/aebguh3k/7/

样本代码：

$(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");
  });
});

如何修复代码，使其正常运行？

Answer 1

在触发单击处理程序之前，不透明度属性不会添加到div中。所以任何东西都可以动画片。

添加初始样式将有所帮助：https://jsfiddle.net/aebguh3k/8/

CSS:

.cselect {
  opacity: 0;  
}

JS:

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

Answer 2

只需添加到css：

#div2,
#div3,
#div4 {
  opacity: 0;  
}