Справка JQuery - анимированный цвет фона

Используя JQuery, я хочу создать функцию, которая, когда я вызову функцию, приведет к исчезновению цвета фона моего "#page" DIV из определенного цвета CSS в желтый, а затем обратно к исходному фону CSS цвет для # страницы.

Любые идеи о том, как я могу это сделать с помощью JQuery?

Я знаю, что у JQuery есть функция "оживить" и "выделить". Кажется, что "подсветка" может быть подходящим вариантом, но я не уверен.

Спасибо

Ответ 1

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

http://docs.jquery.com/UI/Effects/Highlight

$("div").click(function () {
      $(this).effect("highlight", {}, 3000);
});

Ответ 2

function flashColor(id)
{
    var container = $('#'+id);
    if(container.length)
    {
        var originalColor = container.css('backgroundColor');
        container.animate({
            backgroundColor:'yellow'
        },'normal','linear',function(){
            $(this).animate({
                backgroundColor:originalColor
            });
        });
    }
}

Ответ 3

Вам нужен только плагин цвета jQuery, если вы хотите использовать именованные цвета (например, 'yellow' вместо '#FFFF9C'). Я имел переменный успех с animate, но обнаружил, что использование его встроенного обратного вызова плюс jQuery css, похоже, работает в большинстве случаев.

Попробуйте добавить эту функцию:

$(document).ready(function () {

    $.fn.animateHighlight = function (highlightColor, duration) {
        var highlightBg = highlightColor || "#FFFF9C";
        var animateMs = duration || 1000;
        var originalBg = this.css("background-color");

        if (!originalBg || originalBg == highlightBg)
            originalBg = "#FFFFFF"; // default to white

        jQuery(this)
            .css("backgroundColor", highlightBg)
            .animate({ backgroundColor: originalBg }, animateMs, null, function () {
                jQuery(this).css("backgroundColor", originalBg); 
            });
    };
});

и называя его так:

$('#page').animateHighlight();

Протестировано в IE9, FF4 и Chrome, используя jQuery 1.5 (для этого не нужен плагин UI).

Ответ 4

Вы можете использовать встроенную функцию jQuery animate() с обратным вызовом, чтобы вернуть div обратно к исходному цвету. Или используйте плагин jQuery pulse, чтобы сделать это автоматически.

Надеюсь, что это поможет!

Ответ 5

Вам нужен плагин color для анимации между цветами.

См. предыдущий SO q и

Ответ 6

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

К сожалению, поиск термина "jQuery flash plugin" дает сотни результатов для плагинов для SWF-плееров.

Ответ 7

проверить со всеми браузерами

$(document).ready(function () {
    var id = $("div#1"); // div id=1
    var color = "lightblue"; // color to highlight
    var delayms = "800"; // mseconds to stay color
    $(id).css("backgroundColor",color)
    .css("transition","all 1.5s ease") // you may also (-moz-*, -o-*, -ms-*) e.g
    .css("backgroundColor",color).delay(delayms).queue(function() {
        $(id).css("backgroundColor",""); 
        $(id).dequeue();
    }); 
});

Ответ 8

Только это помогло мне. Источник: questions/5205445

$("div").click(function() 
{
  // do fading 3 times
  for(i=0;i<3;i++) 
  {
    $(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
  }
});