Эффект затухания на jQuery

В этой статье я покажу, как сделать приятный анимационный эффект затухания для изображения. Когда пользователь будет проводить мышкой над изображением, мы при помощи jQuery понизим непрозрачность, тем самым мы немного замутним и одновременно осветлим изображение. Преимущества данного метода: простой код и приятный для глаз эффект.

Для начала подсоедините библиотеку jQuery:

HTML

  <script type='text/javascript' src='jquery.js'></script>

Затем добавьте следующий код (в отдельный .js файл или в html-код, неважно):

HTML или .JS

<script type="text/javascript">
  $(document).ready(function(){
    $("img").hover(function() {
      $(this).stop().animate({opacity: "0.8"}, 'slow');
    },
    function() {
      $(this).stop().animate({opacity: "1"}, 'slow');
    });
  });
</script>

Когда пользователь наведет курсор мыши на изображение, оно начнет плавно затухать. Кому-то может показаться, что метод stop() в данном коде ни к чему. Однако если вы не укажете stop() и быстро проведете по изображениям, то сможете увидеть анимацию на всех изображениях. Метод stop() останавливает всю лишнюю анимацию.

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

Как результат: