Я хочу изменить цвет фона "exampleDiv" на исходном белом фоне, когда я вызываю код ниже, чтобы немедленно изменить желтый фон и затем вернуться к исходному белым фоном.
$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast");
Однако этот код не работает.
У меня есть только ядро JQuery и пользовательский интерфейс JQuery, связанный с моей веб-страницей.
Почему не работает код выше?
Я имел переменный успех с animate, но обнаружил, что использование его встроенного обратного вызова плюс jQuery css, похоже, работает в большинстве случаев.
Попробуйте эту функцию:
$(document).ready(function () {
$.fn.animateHighlight = function (highlightColor, duration) {
var highlightBg = highlightColor || "#FFFF9C";
var animateMs = duration || "fast"; // edit is here
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);
});
};
});
и назовите его так:
$('#exampleDiv').animateHighlight();
Протестировано в IE9, FF4 и Chrome, используя jQuery 1.5 (для этого не нужен плагин UI). Я также не использовал плагин jQuery color - вам понадобится только это, если вы хотите использовать именованные цвета (например, 'yellow' вместо '#FFFF9C').
Я считаю, вам также нужно JQuery Color Animations.
У меня была та же проблема, и я смог заставить все работать, когда включил правильные файлы js.
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="/Scripts/jquery-ui-1.8.20.js"></script>
<script src="/Scripts/jquery.color-2.1.2.js"></script>
Я сделал еще один шаг и нашел хорошее расширение, которое кто-то написал.
jQuery.fn.flash = function (color, duration) {
var current = this.css('backgroundColor');
this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration / 2)
.animate({ backgroundColor: current }, duration / 2);
}
Вышеприведенный код позволяет мне сделать следующее:
$('#someId').flash('255,148,148', 1100);
Этот код заставит ваш элемент мигать красным, а затем вернуться к его первоначальному цвету.
Вот пример кода. http://jsbin.com/iqasaz/2
Пользовательский интерфейс jQuery имеет эффект выделения, который делает именно то, что вы хотите.
$("exampleDiv").effect("highlight", {}, 5000);
У вас есть некоторые опции, такие как изменение цвета выделения.
Анимация backgroundColor не поддерживается в jQuery 1.3.2 (или ранее). Поддерживаются только параметры, которые принимают числовые значения. См. документация по методу. плагин цветных анимаций добавляет возможность сделать это с jQuery 1.2.
Я столкнулся с одной и той же проблемой, и в конечном итоге это оказалось многократным вызовом jquery js файла на странице.
Хотя это отлично работает с любыми другими методами, а также с анимацией при попытке использовать другие свойства css, например, слева, но это не работает для свойства цвета фона в методе анимации.
Следовательно, я удалил дополнительный вызов jquery jquery файла, и он работал абсолютно нормально для меня.
Для меня он отлично работал с effects.core.js. Однако я не помню, действительно ли это требовалось. Я думаю, что он работает только с шестнадцатеричными значениями. Здесь образец кода наведения, который заставляет вещи исчезать при наведении курсора. Думал, что это может быть полезно:
jQuery.fn.fadeOnHover = function(fadeColor)
{
this.each(function()
{
jQuery(this).data("OrigBg",jQuery(this).css("background-color"));
jQuery(this).hover(
function()
{
//Fade to the new color
jQuery(this).stop().animate({backgroundColor:fadeColor}, 1000)
},
function()
{
//Fade back to original color
original = jQuery(this).data("OrigBg");
jQuery(this).stop().animate({backgroundColor:original},1000)
}
);
});
}
$(".nav a").fadeOnHover("#FFFF00");
Мне пришлось использовать файл color.js, чтобы заставить это работать. Я использую jquery 1.4.2.
Просто добавлен этот фрагмент ниже jquery script, и он сразу же начал работать:
<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>