2013-08-16 4 views
-1
$(document).ready(function(){ 
    $("h1").hover(function(){ 
     $(this).animate({'color' : 'red'}, "fast"); 
    }, 
    function(){ 
     $(this).animate({'color' : 'white'}, "fast"); 
    }); 
}); 

h1 태그 내의 텍스트 색상을 마우스로 가리키면 빨간색으로 변합니다. 마우스가 h1 태그를 떠날 때 텍스트를 다시 흰색으로 바꾸고 싶습니다. 누군가 제 코드를 수정 해 주시겠습니까?jquery hover animate가 작동하지 않습니다.

+0

당신은 jQuery를 UI 스크립트를 포함해야합니다. –

+0

어떤 부품이 작동하고 어느 부품이 작동하지 않습니까? 선택기가 작동하고 호버 기능 중 하나가 실행 중인지 테스트 했습니까? – Maslow

+0

@Maslow 그가 필요로하는 것은 jQuery UI뿐입니다. 그의 대본은 훌륭합니다. – MisterBla

답변

0

jQuery만으로 색상을 애니메이션으로 만들 수 없습니다.

색상을 움직이게하려면 jQuery UI을 포함해야합니다.

<h1>A header</h1> 
<h1>Another header</h1> 
<h1>And another header</h1> 
<h2>A h2</h2> 

을하고 자바 스크립트 :

다음 HTML을 사용하여

$(document).ready(function(){ 
    $("h1").hover(function(){ 
     $(this).animate({color : 'red'}, "fast"); 
    }, 
    function(){ 
     $(this).animate({color : 'white'}, "fast"); 
    }); 
}); 

을 여기하는 것은 demo입니다.

2

documentation에서 :

참고 : jQuery UI 프로젝트는 색상과 같은 일부 숫자가 아닌 스타일 애니메이션 할 수 있도록함으로써 .animate() 방법을 확장합니다. 이 프로젝트에는 개별 속성보다는 CSS 클래스를 통해 애니메이션을 지정하는 메커니즘도 포함되어 있습니다.

는 jQuery를로드 한 후 페이지에 jQuery를 UI를 포함 :

http://code.jquery.com/ui/1.10.3/jquery-ui.js 

귀하의 <head> 다음과 같이 표시됩니다

<!-- Load jQuery --> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<!-- Load jQuery UI --> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 

그런 다음 애니메이션이 작동합니다.

JSFIDDLE

관련 문제