Question

I need to know how to fade CSS sprite images in the correct effect. I want it like zero opacity to full opacity effect.

There my example:

http://jsfiddle.net/CppV6/

Click those buttons, then their effects don’t look good. I needed a help…

Thanks!

Answer 1

I think that your main problem was that you were only fading to 50% opacity, I have changed this to 0% opacity now.

In addition I have added a couple of other tweeks, the most important being a second queued ‘fadeTo’ effect that fades the sprite back in once the background-position has been changed. This will only be called once the first fade has completed, giving the effect I believe you are looking for.

I have also assigned the $(“#sprite”) selector to a global variable to save the browser performing additional work, making the jQuery more efficient.

It is generally standard practise to name id’s and classes with lowercase letters, it is all too easy not to notice titlecase naming and spend ages figuring out why something isn’t working. Lowercase is safer as a coding standard in this instance.

$(function(){
  var $sprite = $('#sprite'); 
  $("button#Rainbow").click( function(){
    $sprite.fadeTo(200, 0, function() {
      $sprite.css('background-position','0 0');
    });
    $sprite.fadeTo(200, 1);
  });

  $("button#Esmerald").click( function(){
    $sprite.fadeTo(200, 0, function() {
      $sprite.css('background-position','-152px 0');
    });
    $sprite.fadeTo(200, 1);
  });

  $("button#Ruby").click( function(){
    $sprite.fadeTo(200, 0, function() {
      $sprite.css('background-position','-303px 0');
    });
    $sprite.fadeTo(200, 1);
  });
});