jQuery 动画 - 然后跳跃

Question

div 内容交换有问题，我想在内容中设置动画，然后在单击另一个元素时让它消失。

我的内容交换工作正常，但 "appears" 没有动画。第一次加载时所有元素都会发生这种情况。如果您再次单击这些元素，则动画会正常执行。

你可以在这里找到我的例子： 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;  
}

jQuery 动画 - 然后跳跃

jQuery Animate - jumps then

javascript

jquery

animation

show-hide

jquery-animate