jQuery if-request媒体查询的最大宽度

Question

I want to use if-requests for my jQuery-functions in my website for special window-widths. This jQuery-functions enable and disable the attribute display of some divs and if the desktop is bigger than 1300pixels it should show all cols instead of only two in the same time. My jQuery functions look like this:

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

The CSS of the cols in 2cols mode are looking like this:

.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% is the width for two displayed cols and width: 33.% for three displayed at the same time.

Answer 1

You don't need jQuery for that at all.

Use 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;
    }
}

That should preserve this fadeIn animation.

Here's a little fiddle that I prepared to show you the effect: http://jsfiddle.net/CgwDH/ .