Как растушевать изображения спрайтов CSS с помощью CSS background-position с помощью jQuery? - PullRequest
Новая
       13

Как растушевать изображения спрайтов CSS с помощью CSS background-position с помощью jQuery?

0 голосов
/ 19 октября 2011

Мне нужно знать, как выцветать изображения спрайтов CSS с правильным эффектом. Я хочу, чтобы это было как нулевая непрозрачность до полного эффекта непрозрачности.

Там мой пример:

http://jsfiddle.net/CppV6/

Нажмите эти кнопки, тогда их эффекты выглядят не очень хорошо. Мне нужна помощь ...

Спасибо!

1 Ответ

1 голос
/ 19 октября 2011

Я думаю, что ваша основная проблема заключалась в том, что вы только затухали до 50% непрозрачности, сейчас я изменил это значение до 0% непрозрачности.

Кроме того, я добавил пару других твиков, наиболее важным из которых является второй эффект 'fadeTo' в очереди, который возвращает спрайт обратно после изменения положения фона. Он будет вызван только после того, как закончится первое затухание, и даст эффект, который, я полагаю, вы ищете.

Я также назначил селектор $ ("# sprite") глобальной переменной, чтобы браузер не выполнял дополнительную работу и повышал эффективность jQuery.

Обычно принято называть идентификаторы и классы строчными буквами, слишком просто не замечать именования заглавных букв и тратить целую вечность, выясняя, почему что-то не работает. В этом случае строчные буквы безопаснее в качестве стандарта кодирования. 

$(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);
  });
});
...