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

在触发单击处理程序之前，不会将opacity属性添加到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 Animate - 然后跳转

2 个答案: