여러 div에서 복수의 .animate 함수로 글꼴 색상 변경

Question

그래서 다른 요소 위로 마우스를 가져 가면 div의 글꼴 색상을 변경하려고합니다. 나는 호버 내에서 두 개의 애니메이션 기능을 사용하고 http://jsfiddle.net/5QDYE/

: 여기

는 바이올린입니다. 배경 div에 대한 애니메이션 하나, 텍스트 div에 대한 애니메이션 하나. 이런 식으로 보입니다.

function() { 
    $('#background').animate({ 
     height: "40px", 
     width: "80px", 
     marginTop: "0px", 
     marginLeft: "0px" 
    }, 500); 
    $("#text").animate({ color: "#FFF" }, 500); 
}, function() { 
    $('#background').animate({ 
     height: "0px", 
     width: "0px", 
     marginTop: "20px", 
     marginLeft: "40px" 
    }, 500); 
    $("#text").animate({ color: "#000" }, 500); 
}); 

배경 애니메이션이 제대로 작동하지만 텍스트의 색상이 변경되지 않습니다.

Answer 1

css3을 사용하려면 열려있는 상태에서 시도하십시오. 애니메이션 JQuery와 UI를 낮은 버전 즉 1.9.1과 1.9.2에서 작동처럼

function() { 
    $('#background').animate({ 
     height: "40px", 
     width: "80px", 
     marginTop: "0px", 
     marginLeft: "0px" 
    }, 500); 
    $("#text").css({ 'color': "#FFF", 'transition' : 'color 1s' }); 
}, function() { 
    $('#background').animate({ 
     height: "0px", 
     width: "0px", 
     marginTop: "20px", 
     marginLeft: "40px" 
    }, 500); 
    $("#text").css({ 'color': "#000", 'transition' : 'color 1s' }); 
}); 

Fiddle

는 것 같습니다. 2.x에서는 different color plugin package으로 분리 되었기 때문에 컬러 애니메이션을 수행하지 못합니다.

Fiddle