Вспышка фона контейнера оранжевым цветом (как SO, когда вы переходите непосредственно к ответу)

Question

Я хочу, чтобы фон #container вспыхнул оранжевым, а затем вернулся к своему обычному цвету.

Есть ли лучший способ сделать это, чем:

var old_bg_color = $('#container').css('background-color');
$('#container').css('background-color', 'orange')
  .animate({backgroundColor: old_bg_color}, 3000);

Answer 1

Проверьте исходный код страницы, как SO это делает. Когда связывает ответ, идентификатор ответа будет отображаться в качестве последней части pathinfo URL, например, Мигает фон контейнера оранжевым (как SO, когда вы переходите непосредственно к ответу) <- здесь. </p>

В исходном коде страницы вы обнаружите, что ответ уже имеет сгенерированный на стороне сервера цвет фона. Таким образом, он перехватывает последнюю часть URL-адреса pathinfo (простая задача на любом приличном серверном языке):

<div id="answer-2339009" class="answer" style="background-color:#F4A83D;">

Эта функция исчезает с помощью этой функции в теге "plain vanilla" <script type="text/javascript"> прямо перед </head>:

    var finalColor = '#FFF';
    $('#answer-2339009').animate({ backgroundColor:finalColor }, 2000, 
        'linear', function() {
            // shove the hex color into an element to easily compare rbg() numbers
            var test = $('<span></span>').css('background-color', finalColor);
            if ($(this).css('background-color') != test.css('background-color')) {
                $(this).css('background-color', finalColor);
            }
        }
    );

Кстати, функция обратного вызова не является обязательной для этой функции.