JQuery - 천천히 bg- 이미지 변경

Question

천천히 bg-image로 내 호버 - 액션을 변경하려고합니다.

.menu_part 
{ 
    border-left: 1px solid black; 
    background-image: url(../images/bg_menu.png); 
    float:left; 
    padding: 2px 10px; 
} 

.menu_part:hover 
{ 
    background-image: url(../images/bg_menu_hove.png);        
    color: #FFF; 
} 

메뉴 :

<div id="head_menu"> 
    <a href="#order"><div>make order</div></a> 
    <a href="#portfolio"><div>portfolie</div></a> 
    <a href="#contacts"><div>contacts</div></a> 
    <a href="#vacancies"><div>vacancies</div></a> 
    <a href="#about"><div>about company</div></a> 
</div> 

일부 JQuery와 :

$('#head_menu a').addClass('menu_part'); 

은 이제 선택 $ ('#의 head_menu의 A')에 대한 호버 액션을 작성하는 것을 시도하고있다. 마우스를 가져갈 때 bg-image를 필요에 따라 천천히 바꿀 수 있습니까?

---

여기 내 시련-코드 :

$("#head_menu a").hover(
     function() { 
      $(this).animate({backgroundImage: 'url(images/bg_menu_hove.png)', color: '#fff'}, 1000); 
     }, 
     function() { 
      $(this).animate({backgroundImage: 'url(images/bg_menu.png)', color: '#000'}, 1000);     
     } 
    ); 

그러나 지금도 메뉴를 표시하지 않습니다. 내가 뭘 잘못 했니? 그리고 bg-position을 사용하려고합니다.

---

여기는 bg 위치 코드입니다. 이해할 수 없습니다. 나는 bg_menu.png과 bg_menu_hove.png을 하나의 이미지 200px + 200px로 병합했습니다. 위 스타일은 JQuery 없이도 작동하지 않습니다. 난 당신이 할 수 있다고 생각

.menu_part:hover 
{ 
    background-image: url(../images/new_menu.png); 
    background-position: 0 -200px; 
} 

Answer 1

우선 배경 변경으로 호버 효과에 대한 표준 기술은 두 그림을 병합합니다. 그러면 bg_menu_hove.png ~ bg_menu.png을 붙인 다음 배경 위치로 재생하면됩니다.

a 태그에서 div을 제거하십시오 (div는 블록 요소이고 a는 인라인입니다 ... 반대 일 수 있습니다).

이제 이미지가 하나만있는 경우, 예를 들어 animate의 기능을 jQuery (물론 backgroundPosition)에서 사용하십시오. 초심자를위한 좋은 예를 볼, 정말 유용한 사이트를 가지고 : http://visualjquery.com/ (클릭 : Effects -> Custom -> Animate)

Answer 2

은 JQuery와 animate 기능과 CSS에 약간의 변경이 작업을 수행 - 무엇인가 : 다음

.menu_part 
{ 
    border-left: 1px solid black; 
    background-image: url(../images/bg_menu_hove.png); 
    float:left; 
    padding: 2px 10px; 
} 

.menu_part div 
{ 
    background-image: url(../images/bg_menu.png);        
    color: #FFF; 
} 

그리고 :

$('#head_menu a').addClass('menu_part'); 

$('.menu_part').bind('mouseover', function() { 

    $(this).find('div').animate({ 
     opacity: 0 
     }, 1500); 

}); 

$('.menu_part').bind('mouseout', function() { 

    $(this).find('div').animate({ 
     opacity: 1 
     }, 1500); 

}); 

나오지 않았어 그 순간에 테스트하지 마세요, 미안 해요 -하지만 당신은 기본적인 아이디어를 얻습니다.