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

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; 
} 

個