Question

我想在我的网站中对我的jQuery函数使用if-requests以获得特殊的窗口宽度。这个jQuery函数启用和禁用某些div的属性显示，如果桌面大于1300像素，它应该显示所有cols而不是同时显示两个cols。我的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;
}

宽度：47.9％是两个显示的色列宽度和宽度：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/。

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

1 个答案: