1

特別なウィンドウ幅のために、Web サイトの jQuery 関数に if-requests を使用したいと考えています。この jQuery 関数は、一部の div の属性表示を有効または無効にし、デスクトップが 1300 ピクセルを超える場合、同時に 2 つだけではなくすべての列を表示する必要があります。私のjQuery関数は次のようになります。

function changeCol() {
    var d1= document.getElementById('right-col');
    $(d1).removeClass('hidden');
    $(d1).fadeIn(200);
};

2cols モードの列の CSS は次のようになります。 

.col {
   float: left;
   margin-right: 1.36986301369863%;
   /*width: 31.50684931506849%;*/
   width: 47.93617021276596%;
   height: 100%;
   padding: 0 1.36986301369863%;
   overflow-y: auto;
   overflow-x: hidden;
}

width: 47.9% は、2 つの列が表示された場合の幅で、width: 33.% が同時に表示された場合の幅です。

4

1 に答える 1

1

そのためにjQueryはまったく必要ありません。

CSSを使用します。

.right-col {
    width: 0;
    opacity: 0;

    -webkit-transition: opacity 200ms ease-out;
    -moz-transition: opacity 200ms ease-out;
    -ms-transition: opacity 200ms ease-out;
    -o-transition: opacity 200ms ease-out;
    transition: opacity 200ms ease-out;
}

@media only screen and (min-width: 1300px) {
    .right-col {
        width: auto;
        opacity: 1;
    }
}

これにより、このfadeInアニメーションが保持されます。

効果を示すために用意した小さなフィドルを次に示します: http://jsfiddle.net/CgwDH/。

于 2013-10-11T07:45:58.083 に答える