webkit轉換延遲不適用，而我改變類名稱

Question

我正在製作幻燈片，爲此，我做了一個覆蓋顯示，而人們點擊列表中的圖像。

在覆蓋div中，我在不透明度改變中應用了'1s'的延遲。但是當我將課程從隱藏變爲顯示時，我沒有得到不透明的一天。

任何好的方法來實現這一點，或正確的方式來做到這一點？

功能：

var showOverlay = function(params){ 
    var layer = params.overlay; 
    console.log(layer); 
    if('layer:hidden'){ 
     layer.removeClass('hidden'); 
     layer.addClass('show'); 
    } 
} 

var basicLayout = function (params) { 

    var $list = params.list; 

    $list.click(function() { 
     showOverlay(params); 
    }); 
} 

$(document).ready(function() { 
    var params = { 
     list : $('#container').find('li'), 
     overlay : $('#overlay') 
    } 
    basicLayout(params) 
})​ 

here is the jsfiddle

Answer 1

的條件是錯誤的：

if (layer.is(':hidden')) { 

Answer 2

你並不需要在你的CSS #overlay.show和#overlay.hidden。而是將#overlay設置爲display: none而不是opacity: 0。

然後取出：

if('layer:hidden'){ 
    layer.removeClass('hidden'); 
    layer.addClass('show'); 
} 

，取而代之的是：

layer.fadeIn(); 

或者，如果你想在一週秒鐘後，你可以使用：

layer.delay(1000).fadeIn(); 

Answer 3

一些實驗，我將我的功能拆分爲這樣：

var showOverlay = function(params){ 
    var layer = params.overlay; 

    if(layer.is(':hidden')){ 
     layer.removeClass('hidden');//1 
     layer.show();//2 
     layer.addClass('show');//3 - applying separately, now it works fine. 
    } 
} 

var basicLayout = function (params) { 

    var $list = params.list; 

    $list.click(function() { 
     showOverlay(params); 
    }); 
} 

$(document).ready(function() { 
    var params = { 
     list : $('#container').find('li'), 
     overlay : $('#overlay') 
    } 
    basicLayout(params) 
}) 

謝謝大家。