用于媒体查询的 jQuery if-request max-width

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