jQuery Animate - 然后跳转答案

【问题标题】：jQuery Animate - jumps thenjQuery Animate - 然后跳转
【发布时间】：2017-08-02 23:53:34
【问题描述】：

遇到 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");
  });
});

如何修复代码以使其正确动画

【问题讨论】：

标签： javascript jquery animation jquery-animate show-hide

【解决方案1】：

在触发点击处理程序之前，不会将 opacity 属性添加到您的 div 中。所以任何东西都可以动画化。

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

CSS：

.cselect {
  opacity: 0;  
}

JS：

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

【讨论】：

谢谢！忘记了！

【解决方案2】：

只需添加到 css：

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

【讨论】：