затухание в цвете фона по значению

Question

Я пытаюсь использовать функцию анимации JQuery, чтобы изменить цвет фона div. Если случайное число меньше 50 анимированных красных, а если выше 50 анимированных зеленых. Кажется, что все работает, за исключением изменения цвета. Что я делаю здесь неправильно?

function randomInt(min,max) { 
    return Math.floor(Math.random() * (max - min + 1) + min); 
} 

if (randomInt(1, 100) > 50) { 
    $('#status').html("win").animate({backgroundColor: "green" }, "fast"); 
} else { 
    $('#status').html("lose").animate({ backgroundColor: "red" }, "fast"); 
} 

Answer 1

Для анимации цветов вам необходимо либо использовать пользовательский интерфейс jQuery, либо специальный цветной плагин - в отличие от большинства других свойств CSS.

http://plugins.jquery.com/color/

Answer 2

Возможно не с JQuery animate() но с CSS3 transition.

CSS:

#status { 
    -webkit-transition: background-color 2000ms linear; 
    -moz-transition: background-color 2000ms linear; 
    -o-transition: background-color 2000ms linear; 
    -ms-transition: background-color 2000ms linear; 
    transition: background-color 2000ms linear; 
} 

JQuery:

function randomInt(min, max) { 
    return Math.floor(Math.random() * (max - min + 1) + min); 
} 

if (randomInt(1, 100) > 50) { 
    $('#status').html("win").css({ 
     backgroundColor: "green" 
    }); 
} else { 
    $('#status').html("lose").css({ 
     backgroundColor: "red" 
    }); 
} 

Смотрите эту jsfiddle.

Но если вы действительно хотите сделать это с помощью чистого jQuery, вы можете использовать jQuery Color, который будет легче, чем вся библиотека пользовательского интерфейса.

Answer 3

Если вы не хотите использовать JQuery UI или специальный плагин. ** Просто хочу, чтобы продемонстрировать «зеленый» или «красный» цвет, то есть другой рабочий раствор:

function randomInt(min,max) { 
    return Math.floor(Math.random() * (max - min + 1) + min); 
} 
var status = $('#status'); 
if (randomInt(1, 100) > 50) { 
    status.append("win"); 
    status.css({backgroundColor: 'green'}); 
} else { 
    status.append("lose"); 
    status.css({backgroundColor: 'red'}); 
} 

Answer 4

Почему бы вам не сделать это с просто JavaScript и CSS?

Просто добавив transition: background 1s к вашему CSS и используя getElementById в JavaScript

Вот Fiddle