Animacja kolorów tła JQuery nie działa

Question

Chcę zmienić kolor tła "exampleDiv" z oryginalnego białego tła na, kiedy wywołuję poniższy kod, aby natychmiast zmienić żółte tło, a następnie z powrotem przywrócić oryginalne białe tło.

$("#exampleDiv").animate({ backgroundColor: "yellow" }, "fast"); 

Jednak ten kod nie działa.

Mam tylko rdzeń JQuery i interfejs użytkownika JQuery połączone z moją stroną internetową.

Dlaczego powyższy kod nie działa?

Answer 1

Wierzę, że potrzebujesz także JQuery Color Animations.

Answer 2

Animacja backgroundColor nie jest obsługiwana w jQuery 1.3.2 (lub wcześniejszych). Obsługiwane są tylko parametry, które przyjmują wartości liczbowe. Zobacz metodę documentation. color animations plugin dodaje możliwość wykonania tej operacji od wersji jQuery 1.2.

Answer 3

Interfejs jQuery ma efekt podświetlenia, który robi dokładnie to, co chcesz.

$("exampleDiv").effect("highlight", {}, 5000); 

Masz kilka opcji, takich jak zmiana koloru podświetlenia.

Answer 4

Dla mnie działało dobrze z effects.core.js. Jednak nie pamiętam, czy to naprawdę wymagane. Myślę, że działa tylko z wartościami szesnastkowymi. Oto przykładowy kod hover, który sprawia, że ​​rzeczy znikają po najechaniu myszą. Pomyślałem, że może to być przydatne:

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

Answer 5

miałem różnym powodzeniem z animate, ale okazało się, że za pomocą wbudowanego w zwrotnego oraz jQuery css wydaje się działać w większości przypadków.

Spróbuj funkcję:

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

i nazwać tak:

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

Testowany w IE9, FF4 i Chrome, używając jQuery 1.5 (nie trzeba UI plugin do tego). Nie użyłem również wtyczki kolorowej jQuery - wystarczyłoby, aby użyć nazwanych kolorów (np. 'yellow' zamiast '#FFFF9C').

Answer 6

Musiałem użyć pliku color.js, aby to zadziałało. Używam jquery 1.4.2.

Get the color.js here

Answer 7

miałem ten sam problem i udało mi się dostać wszystko do pracy, kiedy włączone odpowiednie pliki 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> 

Zrobiłem krok dalej i znalazłem ładne przedłużenie, które ktoś napisał.

jQuery.fn.flash = function (color, duration) { 
    var current = this.css('backgroundColor'); 
    this.animate({ backgroundColor: 'rgb(' + color + ')' }, duration/2) 
    .animate({ backgroundColor: current }, duration/2); 
} 

Powyższy kod pozwala mi wykonać następujące czynności:

$('#someId').flash('255,148,148', 1100); 

Ten kod dostanie elementem migać na czerwono, a następnie z powrotem do pierwotnego koloru.

Oto przykładowy kod. http://jsbin.com/iqasaz/2

Answer 8

Natknąłem się na ten sam problem i ostatecznie okazało się, że jest to wielokrotne wywołanie pliku jquery na stronie.

Chociaż działa to absolutnie dobrze z innymi metodami, a także z animacją po wypróbowaniu z innymi właściwościami css, takimi jak pozostawione, ale nie działa dla właściwości koloru tła w metodzie animacji.

W związku z tym usunąłem dodatkowe wywołanie pliku js jquery i działało dla mnie absolutnie dobrze.

Answer 9

Wystarczy dodało ten fragment poniższego skryptu jquery i od razu rozpoczął pracę:

<script src="https://cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script> 

Source