Изменения цвета цвета с помощью CSS + jQuery

Question

Целью, которую я хотел бы достичь, является то, что если размер окна больше 400, цвет #box2 изменяется на черный (при нахождении на #box1), если размер меньше 400, #box2 меняется на желтый.

Я думал, что закончил эту задачу, однако я обнаружил, что мне всегда нужно обновить страницу, чтобы увидеть эффекты. jQuery не работает сразу после изменения размера окна.

Нужно ли использовать ajax или что-то, чтобы заставить jQuery реагировать на работу?

Интернет Пример: http://jsfiddle.net/dFbXr/

вот мой код

HTML: 
    <div id="box1"> 
     <div id="box2"></div> 
    </div> 

jQuery: 
    function colorchange(){ 
    if($(window).width() > 400){ 
     $("#box1").mouseover(function(){ 
     $("#box2").css('background','black'); 
     }).mouseout(function(){ 
      $("#box2").css('background','blue'); 
    }); 
     }else{ 
    $("#box1").mouseover(function(){ 
    $("#box2").css('background','yellow'); 
    }).mouseout(function(){ 
      $("#box2").css('background','blue'); 
    }); 
    } 
    }  

    colorchange(); 

CSS: 
    #box1{ 
     display: block; 
     background:red; 
     background-size: 100%; 
     position: relative; 
     padding-bottom: 60%; 
    } 

    #box2{ 
     display:block; 
     background:blue; 
     position:absolute; 
     height:70px; 
     width:70px; 
     right:50%; 
     top:50%; 
     margin: -35px -35px 0 0; 
     } 

Answer 1

Вы должны вызвать вашу colorchange() функцию как при первой загрузке страницы и при изменении размеров окна. Существует «размер» событие, которое вы можете справиться с кодом, как это:

$(window).on("resize",colorchange); 

Обратите внимание, что colorchange передается в качестве параметра к .on() functionбез скобок, то есть, не colorchangecolorchange(). Без parens передает ссылку на функцию, когда parens вызывает функцию немедленно и передает ее результат.

Демо: http://jsfiddle.net/dFbXr/1/

Вы упомянули Ajax, но Ajax не имеет никакого отношения к проблеме под рукой: она для отправки и/или приема данных от веб-сервера без перезагрузки всей страницы.

Answer 2

Вы только вызываете функцию colorchange() один раз - вам нужно позвонить ему снова при каждом изменении размера окна, иначе он будет только один раз через ваш if-else.

Вам нужно добавить Jquery к коду:

$(window).on("resize",colorchange); 

Answer 3

Если вы только поддерживать CSS3 браузеры и не хотят полагаться на JavaScript, вы можете использовать медиа-запрос, чтобы достичь того же, путем изменения эффекта :hover по размеру экрана.

Вот краткий пример: http://jsfiddle.net/dFbXr/2/