2014-07-14 3 views
1

내 코드가 작동하지 않는 이유를 모르겠다 ...jquery .animate()가 작동하지 않습니다.

클릭했을 때 제목의 색상을 애니메이트하고 싶습니다.

나머지는 애니메이션이 필요 없으며 잘 작동하기 때문에이 단순한 부분으로 페이지를 축소했습니다.

다음은 JSFiddle

HTML

<head> 
    <script src="Scripts/jquery-1.11.0.min.js" type="text/javascript"></script> 
    <script src="Scripts/Script.js" type="text/javascript"></script> 
</head> 
<div id="Nav"> 
    <h2>About</h2> 
    <h2>Works</h2> 
    <h2>Contacts</h2> 
</div> 

CSS

#Nav { 
    position: fixed; 
    top: 0; 
    left: 0; 
    padding: 10px; 
    z-index: 2; 
} 
#Nav h2 { 
    display: table; 
    color: #353535; 
} 
#Nav h2:hover { 
    cursor: pointer; 
} 

JQUERY

function sortEvents() { 
    $("#Nav h2").click(function() { 
     $("h2").animate({ "color": "#f49d29" }, 1500);  
    }) 
} 
+0

jQuery를 색상 애니메이션을 수 없습니다. https://github.com/jquery/jquery-color와 같은 플러그인이 필요합니다. – Spokey

답변

0

당신의 피들에는 jQuery가 포함되어 있지 않습니다.

jQuery를 UI 색상 작업을위한 컬러 애니메이션뿐만 아니라 많은 유틸리티 함수를 제공 JQuery와 컬러 플러그인 다발 : 다음 색을 사용 animatejQuery UI jQuery와 색상을 포함하여 사용될 수있다.

은 선택으로이를 이용하여 만 클릭 된 요소 색상을 고려 :

$("#Nav h2").click(function() { 
    $(this).animate({ 
     "color": "#f49d29" 
    }, 1500); 
}) 

데모 : http://jsfiddle.net/IrvinDominin/49Zrf/5/ 당신은 컬러 애니메이션을 가지고 Jquery.UI의 중위를 사용할 필요가

+0

감사합니다! 나는 "this"를 사용하지만 예제에서 나는 그것에 대해 걱정하지 않았다. 전체 애니메이션은 훨씬 더 많은 것들을 선택하고 "h2"는 단지 예일뿐입니다. – enikmaster

+0

@enikmaster 확인, 그냥 추가했습니다 :-) –

0

표준 jQuery 라이브러리는 컬러 애니메이션을 지원하지 않습니다에게 있습니다. JQuery UI를 포함시켜야한다. http://jqueryui.com/animate/

+0

감사합니다! 도움말 감사. – enikmaster

0

. 동일한 것을 보여주기 위해 Fiddle을 업데이트하십시오.

코드 조각 : 혼자

$(document).on('click','#Nav > h2', function() { 
    $(this).animate({ "color": "red" }, 1500);  
}); 
+0

고마워요! 이미 내 코드를 업데이트했습니다. – enikmaster

관련 문제