jQuery Animate - jumps then

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に追加します。

を