jquery - 当我更改类名时，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)
})​

这是jsfiddle

Answer 1

通过一些实验，我将我的功能拆分为：

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 2

条件错误：

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

Answer 3

你不需要在你#overlay.show的#overlay.hiddenCSS 中。而是设置#overlay为display: none而不是opacity: 0.

然后删除：

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

并将其替换为：

layer.fadeIn();

或者，如果您想要一秒钟的延迟，您可以使用：

layer.delay(1000).fadeIn();