0

私はスライドショーを作成しています。そのために、人々がリスト内の画像をクリックしている間に表示するオーバーレイを作成しました。

オーバーレイ div で、不透明度の変更に「1」の遅延を適用しました。しかし、クラスを非表示から表示に変更すると、不透明度が低下します。

これを達成するための良い方法、またはこれを行う適切な方法はありますか?

関数：

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があります

4

3 に答える 3

0

条件が間違っています:

if ( layer.is(':hidden') ) {
于 2012-07-16T14:45:03.573 に答える
0

いくつかの実験で、私は自分の関数を次のように分割しました:

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

皆さんありがとう。

于 2012-07-17T05:40:38.870 に答える
-1

CSSに#overlay.showandを含める必要はありません。#overlay.hiddenの代わりに に設定#overlayしdisplay: noneますopacity: 0。

次に削除します。

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

そしてそれを次のように置き換えます：

layer.fadeIn();

または、1 秒の遅延が必要な場合は、次を使用できます。

layer.delay(1000).fadeIn();
于 2012-07-16T14:56:54.997 に答える