Div rotate работает в JSFiddle, но не в фактическом проекте

Question

Я пытаюсь повернуть мой div на 90 ° на клик и на 90 ° назад со следующей кнопкой onclick.

По какой-то причине поворот не работал, поэтому я поставил код в JSFiddle, чтобы выяснить проблему, и вдруг тот же код работает.

Прежде всего JSFiddle: http://jsfiddle.net/YruV7/

Вот код моего проекта:

HTML и JQuery:

<script src="resources/js/jquery.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="resources/styles/stylesheet.css" /> 
<script type="text/javascript"> 
    var rotation = 90; 

    jQuery.fn.rotate = function(degrees) { 
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)', 
       '-moz-transform' : 'rotate('+ degrees +'deg)', 
       '-ms-transform' : 'rotate('+ degrees +'deg)', 
       'transform' : 'rotate('+ degrees +'deg)'}); 
    }; 

    $('#control').click(function() { 
    $(this).rotate(rotation); 
    if(rotation === 90) { 
     rotation = 0; 
    } 
    else { 
     rotation = 90; 
    } 
    }); 
</script> 
</h:head> 
<h:body> 
    <div id="mainWrapper"> 
     <div id="header"> 
      <div id="control"> 
      </div> 
     </div> 
.. 

CSS:

@charset "utf-8"; 
/* CSS Document */ 

*{ 
    margin:0; 
    padding:0; 
} 

body,html { 
    height: 100%; 
    font-family: 'Quicksand', sans-serif; 
} 

div#mainWrapper { 
    height: 100%; 
    width: 100%; 
    background-color: #03436A; 
} 

div#header { 
    background-color: #03436A; 
    width: 100%; 
    height: 5%; 
} 

div#control { 
    background:url(../images/logo_small.png) no-repeat center center; 
    width: 70px; 
    height: 70px; 
} 

div#control:hover { 
    opacity: 0.7; 
} 

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

Что мне также интересно, если есть простой способ анимировать поворот, так что он перемещается в нужное положение вместо того, чтобы быть мгновенно там, но мой главный вопрос заключается в том, почему код не будет работать в моем проекте ,

Answer 1

Причина очень проста. Когда вы вызываете $('#control'), идентификатор элемента control еще не существует, поскольку он объявляется только после скрипта, поэтому он терпит неудачу.

Он работает в jsFiddle, потому что он вызывает ваш скрипт в событии window.onload, когда DOM уже полностью загружен.

Answer 2

JS-скрипка обычно делает что-то для вас (например, добавляет тег «HTML»), поэтому я подозреваю, что вы неправильно используете скрипты в своем проекте, вы должны добавить свой скрипт до конца своего тела.