Question

I am having stripes for background image which is having both in-active and active image for list items. I want to slowly load the active class.

CSS EXAMPLE for one Span

.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>

Tried so far

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

Please help how I can slowly load the active image on hover at spans

Answer 1

To answer your question, no you cannot “slowly” change a class, as web technology as of now does not support it [though it is possible with background image colors and css3, but that does not work with background-images]…

However, to achieve the effect that you want [ie: A mouseover “hover” effect with background images], use the following method:

Add an overlay-container “<div>” inside each of the <span> elements. Then position it absolute with css, add a background-image [which will be the hover image]. Make the div the same size as span, and add mouseover/mouseout handlers on the span tag, which should animate the opacity of the <div> inside it. So that the element responds to the “hover“.

So with that, less talk and more code….

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/