CODEWITHSUNDEEP
jqueryhtmlcss
Sharmaji
Sharmaji

Reputation: 599

change class slowly with jquery

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

Upvotes: 2

Views: 3440

Answers (3)

extramaster
extramaster

Reputation: 2653

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/

Upvotes: 0

vvohra87
vvohra87

Reputation: 5664

There are two common approaches to this, one is jquery ui based, the other is css3 transformations.

If you need IE compatability, then css3 transitions are not an option.

Using jQuery:

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

You can read more about it at the official documentation page.

The other option, using CSS3 transformations:

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

The fiddle can be found here.

Edit

You can't directly transition the background image. You need to use multiple elements with different image states or a sprite with both states in it. I found a detailed article on doing this using CSS3 and it also covers compatibility issues.

End Edit

Finally, from a architectural standpoint, you might want to consider using data attributes and jquery to swap images, it's far cleaner than adding multiple classes where only the url attribute is being changed. Also, it's easier to read and manage.

Upvotes: 2

Kavi Siegel
Kavi Siegel

Reputation: 2994

If you're speaking of using animation, you can use jQueryUI toggleClass()

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

Upvotes: 1

Related Questions