1

I'm having some problems with the method switchClass. I want to add/remove a css class (newsHover) when the mouse is hover the class newsArea with some transition.

I have the following code

$('.newsArea').mouseover(function(){
        $(this).switchClass('','newsHover',500, 'linear');
 }).mouseleave(function(){
        $(this).switchClass('newsHover','',500);
});

I think the methods are correct as you can see: http://docs.jquery.com/UI/Effects/ClassTransitions and http://jqueryui.com/docs/switchClass/

The newsHover class has a background-image:

.newsHover{        
        background-image: url("../../images/newsArea-hover.png"); 
        background-repeat: no-repeat; 
        background-position:left top;
        width: 200px; height: 52px;            
      }

The image appears but without any transition. It appears after the 500 milliseconds.

I can accept any solution with css3 cross-browser.

Any tips here??

thanks

EDIT

I forgot to tell that I'm using the 1.7.2 jquery version; jquery.easing.1.3, and jquery-ui-1.8.23.custom.min (with all the components selected)

saomi
  • 855
  • 5
  • 16
  • 38
  • http://stackoverflow.com/questions/7925994/jquery-ui-switchclass-method-is-not-working-properly – Krishna Kumar Aug 31 '12 at 17:33
  • thanks. But the addClass() and removeClass methods I can't have any transition, right?? or am I forgetting something?? – saomi Aug 31 '12 at 17:44

2 Answers2

1

Just for your information, the behaviour you describe is exactly as expected. the switchClass function simply changes properties it can't animate at the end of the 'transition'. switchClass doesn't support animating background images.

Not all styles can be animated. For example, there is no way to animate a background image. Any styles that cannot be animated will be changed at the end of the animation.

From [http://api.jqueryui.com/switchClass/][1]

codinghands
  • 1,741
  • 2
  • 18
  • 31
-1

Have an initial class in place to switch with - 

$('.newsArea').mouseover(function(){
        $(this).switchClass('oldClass','newsHover', 500);
 }).mouseleave(function(){
        $(this).switchClass('newsHover','oldClass',500);
});

Maybe the image takes time to load after you have applied it?

So you could try..

.oldClass{
  background-image: url("../../images/newsArea-hover.png"); 
  background-size:0px;
}
.newsHover{        
   background-size: auto;     
}
Robin Maben
  • 22,194
  • 16
  • 64
  • 99
  • The first block of code doesn't work. If you could analyze the source code from 2nd link I gave you can see something similar. About the second block I didn't tried but I guess that it would change the opacity of the text that is inside my .newsArea class. So it's not a solution. Thanks – saomi Aug 31 '12 at 17:37
  • @user794035: I suspected so. I removed the `opacity` bit for another reason I thought could be causing your image taking time to load? – Robin Maben Aug 31 '12 at 17:48
  • Thanks anyway. In a meanwhile if you have any other idea feel free to share it. – saomi Aug 31 '12 at 17:55