jQuery가 한 클래스에서 다른 클래스로 요소를 희미하게 옮겨 놓을 때

Question

이 작업을 수행 할 수 있습니까?

예 : 마우스가 밖으로 때

.class1{ 
    background-image:(whatever.jpg) 
    color: #fff; 
} 

.class2{ 
    background-image:(whatever2.jpg) 
    color: #999; 
} 

나는 마우스가 요소 위에있을 때 Class2의에 클래스 1이 모든 요소를 ​​퇴색, 다시 Class1을 할 수 있습니까?

Answer 1

이 영향을 미칠 fadeIn() 및 페이드 아웃()을 사용하여 (onMouseover와 부착하고 onmouseout).

Answer 2

나는 this plugin을 찾고 있습니다. 클래스간에 애니메이션을 적용 할 수 있습니다. 예를 들어

동일한 절대 위치 양쪽 주면

$('.class1').animateToClass('.class2', 1000); 

Answer 3

jQuery UI's extension to addClass을 살펴보십시오. duration 매개 변수로 애니메이션 가능성을 제공합니다. 여기

, 난 당신이 이런 식으로 뭔가를하고 싶은 생각 :

$('.class1').hover(function(){ 
    $(this).addClass('class2', 800); 
}, function(){ 
    $(this).removeClass('class2', 800); 
}); 

은 확실히 당신이를 위해 jQuery를 UI를 설치해야합니다. 내가이 당신에게 완전한 도움이 될 수 있다고 생각

Answer 4

....

$('.class1').mouseover(function() { 
    $(this).toggleClass('class2'); 
}); 

Answer 5

당신이 플러그인을 사용하지 않으려면, 당신은이 다음을 수행 할 수

$(".class1").hover(
function() { 
    $(this).fadeOut(function() { 
     $(this).removeClass("class1").addClass("class2").fadeIn('fast'); 
    }); 
}, 
function() { 
    $(this).fadeOut(function() { 
     $(this).removeClass("class2").addClass("class1").fadeIn('fast'); 
    }); 
}); 

Answer 6

이가 내 구현 :

 $(this).fadeOut("fast"); or $(this).hide(); 
     $(this).removeClass('css1').addClass('css2'); 
$(this).fadeIn("slow");