Я хочу, чтобы скрыть DIV с помощью изменения размеров окна

Question

Я попытался скрыть DIV с JQuery с помощью следующего кода:

$(window).resize(function(){ 
    if (window.innerHeight < 750) { 
    $("footer").animate({'height' : '0px'}, 500); 
    } 
    if (window.innerHeight > 750) { 
    $("footer").animate({'height' : '35px'}, 500); 
    } 
}); 

Я проверил его в Chrome и он работает только один раз. Он исчезает и больше не появляется, изменяя размер.

Есть ошибки в моем коде или является неправильным решением?

Благодарим вас в ожидании!

Answer 1

Легкий способ заключается в использовании медиа-запрос: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Например, если у вас есть идентификатор #divOne, вы стиль в DIV, как обычно и добавить отдельный медиа-запрос, как display: none;, когда окно стягивается указанная ширина. В этом случае, ДИВ скрывает, когда ширина окна ниже 600px:

#divOne {display: block; height: 200px; background: #000; } 

@media (max-width: 600px) { 
    #divOne { 
    display: none; 
    } 
} 

Answer 2

Это означает, что это условие if (window.innerHeight > 750) { никогда не выполняющийся, потому что браузер window.innerHeight меньше 750. Для того, чтобы увидеть значение в консоли журнал это так :

console.log(window.innerHeight); 

Answer 3

Вот JQuery Реализация:

Предположим, что вы хотите скрыть div1, когда ширина окна меньше 750px и отобразить его снова, если ширина окна г чем ля большей 750px

HTML

<div id="div1"> 
</div> 

CSS

#div1{ 
    width:100%; 
    padding:30px; 
    background:#1d1d1d; 
} 

JQuery

$(window).resize(setDivVisibility); 
function setDivVisibility(){ 
    if (($(window).width()) < '750'){ 
    $('#div1').css('display','none'); 
    } else { 
    $('#div1').css('display','block'); 
    } 
} 

Working jsfiddle:http://jsfiddle.net/a8V9V/