Используя JQuery, я хочу создать функцию, которая, когда я вызову функцию, приведет к исчезновению цвета фона моего "#page" DIV из определенного цвета CSS в желтый, а затем обратно к исходному фону CSS цвет для # страницы.
Любые идеи о том, как я могу это сделать с помощью JQuery?
Я знаю, что у JQuery есть функция "оживить" и "выделить". Кажется, что "подсветка" может быть подходящим вариантом, но я не уверен.
Спасибо
Его довольно тяжело загружать пользовательский интерфейс jquery только для этой функции, но если вы используете его в любом случае, эффект, который вы хотите, это "выделить"
http://docs.jquery.com/UI/Effects/Highlight
$("div").click(function () {
$(this).effect("highlight", {}, 3000);
});
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
});
});
}
}
Вам нужен только плагин цвета 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).
Вы можете использовать встроенную функцию jQuery animate() с обратным вызовом, чтобы вернуть div обратно к исходному цвету. Или используйте плагин jQuery pulse, чтобы сделать это автоматически.
Надеюсь, что это поможет!
Вам нужен плагин color для анимации между цветами.
См. предыдущий SO q и
Вы можете проверить плагины, такие как этот, чтобы достичь того, что некоторые называют "вспышкой".
К сожалению, поиск термина "jQuery flash plugin" дает сотни результатов для плагинов для SWF-плееров.
проверить со всеми браузерами
$(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();
});
});
Только это помогло мне. Источник: questions/5205445
$("div").click(function()
{
// do fading 3 times
for(i=0;i<3;i++)
{
$(this).fadeTo('slow', 0.5).fadeTo('slow', 1.0);
}
});