JQuery help - animate background color

Question

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

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

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

Благодаря

Answer 1

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

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

Answer 2

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

Смотреть предыдущий SO q & a

Answer 3

Вы можете проверить плагины, такие как this one, чтобы добиться того, что некоторые называют «вспышки».

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

Answer 4

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 
      }); 
     }); 
    } 
} 

Answer 5

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

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

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

Answer 6

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

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

$(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 для этого) ,

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

Answer 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); 
    } 
});