March 5, 2012

jquery button fade with background image acting strange

Question by Sackling

I am trying to make a button fade into another class by using the toggleClass method. This seems to work fine until I introduce a background image into the classes.

I’m not even sure what it is doing exactly.. It seems to depend on where the mouse is on the button. Anyways the button sort of starts the fade, possibly where it is just the background color not image, and then just “pops” in the background once it completes the animation. I recreated it here:

http://jsfiddle.net/2YbqH/1/

So my question is.. how can i make the whole thing fade?

Answer by Starx

Yes, you can’t fade into classes, but it is POSSIBLE with a trick

$('button').on("mouseenter",function(){
     $(this).fadeOut(100).toggleClass("ui-state-hover").fadeIn(100);
});

Here is a demo. Basically, the idea is to fade out, then toggle the class and show again.

Check this demo to fake a background, when the button are fading out and in. I hope you will be do what you want from these demos.

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!