jquery로 클래스를 천천히 바꾼다

Question

목록 항목에 대해 비활성 이미지와 활성 이미지를 모두 가지고있는 배경 이미지의 줄무늬가 있습니다. 활성 클래스를 천천히로드하려고합니다. 하나의 스팬

.customer1 { width: 105px; height:68px; background:url(../img/in-customer1.png) 0px 15px no-repeat; display:block; } 
.customer1_active { background:url(../img//customer1_active.png) 0px -70px no-repeat; } 

는 HTML

<div id="customers"> 
<span class="customer1"></span> 
<span class="customer2"></span> 
    <span class="customer3"></span> 
    <span class="customer4"></span> 
</div> 

이

$(this).removeClass('default').addClass('fixed').fadeIn('slow'); 

하는 시간을 도와주세요 지금까지 시도에 대한

는

CSS의 예 당신이 애니메이션을 사용하는 말한다면 아야 나는 천천히 스팬

Answer 1

귀하의 질문에 대답하기 위해, 지금은 웹 기술이 지원하지 않기 때문에 "천천히"클래스를 변경할 수 없습니다. [배경 이미지 색상 및 CSS3에서는 가능하지만 그럴 수는 있지만 background-images에서는 작동하지 않습니다.] ..

그러나

, 원하는 효과를 달성하기 위해 [예 : 배경 이미지가있는 마우스 오버 "호버"효과] :

는 각각의 내부에 오버레이 컨테이너 "<div>"를 추가, 다음 방법을 사용 <span> 요소 그런 다음 css로 절대 위치를 지정하고 배경 이미지를 추가합니다.div를 span과 동일한 크기로 만들고, span 태그에 mouseover/mouseout 처리기를 추가합니다.이 핸들러는 내부에 <div>의 불투명도로 애니메이션을 적용해야합니다. 요소가 "hover"에 응답합니다. 그와 그래서

, 적은 이야기와 더 많은 코드 ....

HTML :

<div id="customers"> 
<span class="customer1"></span> 
</div>​ 

CSS :

#customers span { width: 105px; height:68px; display:inline-block; } 
.customer1{ 
    background:url(http://placekitten.com/105/68) 0px 0px no-repeat; 
} 
.customer1_active{ 
    background:rgba(0,0,0,0.7); 
} 
#customers .active { 
position:absolute; 
}​ 

JS :

$("#customers span").each(function(){ 
    $(this).append("<div></div>").find("div").attr("class",$(this).attr("class")+"_active active").css({height:$(this).css("height"),width:$(this).css("width"),opacity:0}); 
    $(this).hover(function(){$(this).find("div").clearQueue().animate({opacity:1})},function(){$(this).find("div").clearQueue().animate({opacity:0})}) 
    });​ 

JSFiddle : http://jsfiddle.net/mGcjU/1/

Answer 2

에 가져가의 활성 이미지를로드 할 수 있습니다, 당신은 사용할 수 있습니다 jQueryUI, 하나는 JQuery와 UI

// the 1000 signifies 1000ms, 1 second of tween time 
$('.customer1').toggleClass('customer1_active', true, 1000).toggleClass('customer1', false, 1000); 

Answer 3

이 두 가지 일반적인 방법이 있습니다 기반으로 toggleClass() , 다른 하나는 css3 변환입니다.

IE 호환성이 필요한 경우 css3 전환은 옵션이 아닙니다. jQuery를 사용

:

$(".newClass").switchClass("newClass", "anotherNewClass", 1000); 

당신은 official documentation page에서 그것에 대해 자세한 내용을보실 수 있습니다.

다른 옵션을 사용하여 CSS3 변환 :

-webkit-transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
transition: all 0.5s ease; 

바이올린

가 here를 찾을 수 있습니다.

편집

사용자가 직접 배경 이미지를 전환 할 수 없습니다. 이미지 상태가 다른 여러 요소 또는 두 상태가있는 스프라이트를 사용해야합니다. CSS3을 사용하여이 작업을 수행 할 때 detailed article이 발견되었으며 호환성 문제도 다루었습니다.

최종 편집 마지막으로

하는 건축 관점에서, 당신은 이미지를 교환하는 데이터 속성 및 jQuery를 사용하는 것을 고려 할 수 있습니다, 그것은 단지 url 속성이 변경되는 여러 클래스를 추가하는 것보다 훨씬 청소기입니다. 또한 읽고 읽고 관리하기가 더 쉽습니다.