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