Изучаем jQuery. Выдвигающийся оверлей

Один из набирающих популярность методов снижения визуального загромождения экранного пространства различными элементами заключается в применении скрытого меню, которое располагается в самом верху окна браузера. Небольшая кнопка или ссылка будет указывать пользователю на то, что он может получить дополнительную информацию, щелкнув на ней. При щелчке на кнопке панель будет выдвигаться в поле зрения и задвигаться обратно, когда пользователь уберет с нее указатель.
Из книги "Изучаем jQuery. 2-е изд.", стр.171

View Cart

script.js

$(document).ready(function(){
  $('<div></div>')
    .attr('id', 'overlay')
    .css('opacity', 0.65)
    .hover(function(){
      $(this).addClass('active');
    }, function() {
      $(this).removeClass('active');
      setTimeout(function(){
        $('#overlay:not(.active)').slideUp(function(){
          $('a.cart-hover').removeClass('cart-hover');
        });
      }, 800);
    }).prependTo('.main-part-body');
    
  $('.cart a').mouseover(function(){
    $(this).addClass('cart-hover');
    $('#overlay:not(:animated)')
      .addClass('active')
      .html('<h3>В корзине <i>5 товаров</i><br>на сумму...')
      .slideDown();      
  });
});