jQuery if-request媒體查詢的最大寬度

Question

我想在我的網站上對我的jQuery函數使用if-requests以獲取特殊的窗口寬度。 此jQuery函數啟用和禁用某些div的屬性顯示，如果桌面大於1300像素，則應同時顯示所有列而不是僅顯示兩個列。 我的jQuery函數如下所示：

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

在2cols模式下的cols的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％是兩個顯示的列的寬度，width：33.％是同時顯示的三個列。

Answer 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/ 。