当我更改类名时，webkit转换延迟不适用

Question

我正在做一个幻灯片放映，为此，我做了一个覆盖显示，而人们点击列表中的图像。

在overlaydiv中，我在不透明度更改中应用了"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)
})​

这是jsfiddle

Answer 1

条件错误：

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

Answer 2

通过一些实验，我将函数拆分为如下所示：

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

谢谢大家。

Answer 3

您不需要在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();