jQuery animuj tłoKolor

327

Próbuję animować zmianę w backgroundColor za pomocą jQuery po najechaniu kursorem myszy.

Sprawdziłem jakiś przykład i wydaje mi się, że mam rację, działa z innymi właściwościami, takimi jak fontSize, ale z backgroundColor otrzymuję i błąd js „Nieprawidłowa właściwość”. Elementem, z którym pracuję jest div.

$(".usercontent").mouseover(function() {
    $(this).animate({ backgroundColor: "olive" }, "slow");
});

Jakieś pomysły?

SteveCl
źródło
W przypadku jquery 1.4.2 z efektem jquery 1.8 muszę przyznać, że rozwiązanie Andrew działa idealnie. Zobacz jego post poniżej.
Patrick Desjardins
1
Uwaga: ta wtyczka wykrywa bieżący kolor tła elementu - przeglądarka Chrome zwraca rgba(0, 0, 0, 0)zamiast oczekiwanej pustej / pustej wartości, gdy nie zdefiniowano koloru tła. Aby to naprawić, element musi mieć początkowy kolor tła.
Shadow Wizard is Ear For You
Strona, do której prowadzi link, wydaje się uszkodzona (przynajmniej strona projektu i strona demonstracyjna).
Paolo Stefan

Odpowiedzi:

333

Kolorowa wtyczka jest tylko o 4 KB tańsza niż biblioteka UI. Oczywiście będziesz chciał użyć przyzwoitej wersji wtyczki, a nie jakiejś starej, błędnej rzeczy, która nie obsługuje Safari i ulega awarii, gdy przejścia są zbyt szybkie. Ponieważ wersja zminimalizowana nie jest dostarczona, możesz przetestować różne kompresory i stworzyć własną wersję min. YUI uzyskuje najlepszą kompresję w tym przypadku, wymagającą tylko 2317 bajtów, a ponieważ jest tak mała - oto ona:

(function (d) {
    d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {
        d.fx.step[e] = function (g) {
            if (!g.colorInit) {
                g.start = c(g.elem, e);
                g.end = b(g.end);
                g.colorInit = true
            }
            g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"
        }
    });

    function b(f) {
        var e;
        if (f && f.constructor == Array && f.length == 3) {
            return f
        }
        if (e = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)) {
            return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])]
        }
        if (e = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)) {
            return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55]
        }
        if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) {
            return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]
        }
        if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) {
            return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]
        }
        if (e = /rgba\(0, 0, 0, 0\)/.exec(f)) {
            return a.transparent
        }
        return a[d.trim(f).toLowerCase()]
    }
    function c(g, e) {
        var f;
        do {
            f = d.css(g, e);
            if (f != "" && f != "transparent" || d.nodeName(g, "body")) {
                break
            }
            e = "backgroundColor"
        } while (g = g.parentNode);
        return b(f)
    }
    var a = {
        aqua: [0, 255, 255],
        azure: [240, 255, 255],
        beige: [245, 245, 220],
        black: [0, 0, 0],
        blue: [0, 0, 255],
        brown: [165, 42, 42],
        cyan: [0, 255, 255],
        darkblue: [0, 0, 139],
        darkcyan: [0, 139, 139],
        darkgrey: [169, 169, 169],
        darkgreen: [0, 100, 0],
        darkkhaki: [189, 183, 107],
        darkmagenta: [139, 0, 139],
        darkolivegreen: [85, 107, 47],
        darkorange: [255, 140, 0],
        darkorchid: [153, 50, 204],
        darkred: [139, 0, 0],
        darksalmon: [233, 150, 122],
        darkviolet: [148, 0, 211],
        fuchsia: [255, 0, 255],
        gold: [255, 215, 0],
        green: [0, 128, 0],
        indigo: [75, 0, 130],
        khaki: [240, 230, 140],
        lightblue: [173, 216, 230],
        lightcyan: [224, 255, 255],
        lightgreen: [144, 238, 144],
        lightgrey: [211, 211, 211],
        lightpink: [255, 182, 193],
        lightyellow: [255, 255, 224],
        lime: [0, 255, 0],
        magenta: [255, 0, 255],
        maroon: [128, 0, 0],
        navy: [0, 0, 128],
        olive: [128, 128, 0],
        orange: [255, 165, 0],
        pink: [255, 192, 203],
        purple: [128, 0, 128],
        violet: [128, 0, 128],
        red: [255, 0, 0],
        silver: [192, 192, 192],
        white: [255, 255, 255],
        yellow: [255, 255, 0],
        transparent: [255, 255, 255]
    }
})(jQuery);
Andrzej
źródło
2
W porządku, przejdź do linku, który proponuje Andrew. Pobierz plik. Musisz dodać go do swojego projektu. Nadal możesz mieć plik jquery.effects.core w swoim projekcie, to zadziała idealnie. Dziękuję za Twoją odpowiedź. +1
Patrick Desjardins
3
Po prostu wkleiłem powyższe do mojego istniejącego pliku „jquery-ui-1.8.2.min.js” i ... wszystko nadal działało :-)
Dave Everitt
7
Chciałbym zauważyć, że w zeszłym roku (2011) autor tej wtyczki wydał wersję 2, która ma wiele fajnych funkcji, ale nie jest wymagana do podstawowej funkcjonalności, której zwykle szuka ta biblioteka. Ma teraz 20 + kb. Możesz wybrać v1gałąź, aby uzyskać starą wersję (która nadal działa), ale ma znacznie mniejszą wagę.
Aren
6
FWIW - można usunąć kolor-to-RGB mapowania w kodzie i zmniejszyć rozmiar dalej: raw.github.com/gist/1891361/... . Minusem jest to, że nie można używać nazw kolorów do animacji. Będziesz musiał użyć wartości rgb.
Niyaz
4
jQuery 1.8 psuje tę wtyczkę przy okazji. curCSS nie jest już w jQuery.
Rich Bradshaw,
68

Miałem ten sam problem i naprawiłem go, włączając jQuery UI. Oto kompletny skrypt:

<!-- include Google's AJAX API loader -->
<script src="http://www.google.com/jsapi"></script>
<!-- load JQuery and UI from Google (need to use UI to animate colors) -->
<script type="text/javascript">
google.load("jqueryui", "1.5.2");
</script>


<script type="text/javascript">
$(document).ready(function() {
$('#menu ul li.item').hover(
    function() {
        $(this).stop().animate({backgroundColor:'#4E1402'}, 300);
        }, function () {
        $(this).stop().animate({backgroundColor:'#943D20'}, 100);
    });
});
</script>
menardmam
źródło
61

Zrób to z CSS3-Transitions. Obsługa jest świetna (wszystkie nowoczesne przeglądarki, nawet IE). Dzięki Compass i SASS można to szybko zrobić:

#foo {background:red; @include transition(background 1s)}
#foo:hover {background:yellow}

Czysty CSS:

#foo {
background:red;
-webkit-transition:background 1s;
-moz-transition:background 1s;
-o-transition:background 1s;
transition:background 1s
}
#foo:hover {background:yellow}

Napisałem niemiecki artykuł na ten temat: http://www.solife.cc/blog/animation-farben-css3-transition.html

volf
źródło
6
Skrzypce z przejściem po najechaniu myszką i kliknięciem na: jsfiddle.net/K5Qyx
Dem Pilafian
30

Bitstorm ma najlepszą wtyczkę animacji kolorów jquery, jaką widziałem. To ulepszenie projektu kolorów jquery. Obsługuje również rgba.

http://www.bitstorm.org/jquery/color-animation/

Emmanuel
źródło
1
Nie mogę ci wystarczająco podziękować za stwierdzenie, że obsługuje on „rgba” - dokładnie tego szukałem
Onimusha,
13

Aby dodać tę funkcjonalność, możesz użyć interfejsu użytkownika jQuery. Możesz pobrać tylko to, czego potrzebujesz, więc jeśli chcesz animować kolor, wszystko, co musisz podać, to poniższy kod. Mam jeśli z najnowszego interfejsu użytkownika jQuery (obecnie 1.8.14)

/******************************************************************************/
/****************************** COLOR ANIMATIONS ******************************/
/******************************************************************************/

// override the animation for color styles
$.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor',
    'borderRightColor', 'borderTopColor', 'borderColor', 'color', 'outlineColor'],
function(i, attr) {
    $.fx.step[attr] = function(fx) {
        if (!fx.colorInit) {
            fx.start = getColor(fx.elem, attr);
            fx.end = getRGB(fx.end);
            fx.colorInit = true;
        }

        fx.elem.style[attr] = 'rgb(' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0) + ',' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0) + ',' +
            Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0) + ')';
    };
});

// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/

// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
        var result;

        // Check if we're already dealing with an array of colors
        if ( color && color.constructor == Array && color.length == 3 )
                return color;

        // Look for rgb(num,num,num)
        if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
                return [parseInt(result[1],10), parseInt(result[2],10), parseInt(result[3],10)];

        // Look for rgb(num%,num%,num%)
        if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
                return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];

        // Look for #a0b1c2
        if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
                return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];

        // Look for #fff
        if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
                return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];

        // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
        if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
                return colors['transparent'];

        // Otherwise, we're most likely dealing with a named color
        return colors[$.trim(color).toLowerCase()];
}

function getColor(elem, attr) {
        var color;

        do {
                color = $.curCSS(elem, attr);

                // Keep going until we find an element that has color, or we hit the body
                if ( color != '' && color != 'transparent' || $.nodeName(elem, "body") )
                        break;

                attr = "backgroundColor";
        } while ( elem = elem.parentNode );

        return getRGB(color);
};

Ma tylko 1,43 kb po kompresji za pomocą YUI:

$.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","borderColor","color","outlineColor"],function(b,a){$.fx.step[a]=function(c){if(!c.colorInit){c.start=getColor(c.elem,a);c.end=getRGB(c.end);c.colorInit=true}c.elem.style[a]="rgb("+Math.max(Math.min(parseInt((c.pos*(c.end[0]-c.start[0]))+c.start[0],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[1]-c.start[1]))+c.start[1],10),255),0)+","+Math.max(Math.min(parseInt((c.pos*(c.end[2]-c.start[2]))+c.start[2],10),255),0)+")"}});function getRGB(b){var a;if(b&&b.constructor==Array&&b.length==3){return b}if(a=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b)){return[parseInt(a[1],10),parseInt(a[2],10),parseInt(a[3],10)]}if(a=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b)){return[parseFloat(a[1])*2.55,parseFloat(a[2])*2.55,parseFloat(a[3])*2.55]}if(a=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b)){return[parseInt(a[1],16),parseInt(a[2],16),parseInt(a[3],16)]}if(a=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b)){return[parseInt(a[1]+a[1],16),parseInt(a[2]+a[2],16),parseInt(a[3]+a[3],16)]}if(a=/rgba\(0, 0, 0, 0\)/.exec(b)){return colors.transparent}return colors[$.trim(b).toLowerCase()]}function getColor(c,a){var b;do{b=$.curCSS(c,a);if(b!=""&&b!="transparent"||$.nodeName(c,"body")){break}a="backgroundColor"}while(c=c.parentNode);return getRGB(b)};

Możesz także animować kolory za pomocą przejść CSS3, ale jest to obsługiwane tylko przez nowoczesne przeglądarki.

a.test {
  color: red;
  -moz-transition-property: color;  /* FF4+ */
  -moz-transition-duration: 1s;
  -webkit-transition-property: color;  /* Saf3.2+, Chrome */
  -webkit-transition-duration: 1s;
  -o-transition-property: color;  /* Opera 10.5+ */
  -o-transition-duration: 1s;
  -ms-transition-property: color;  /* IE10? */
  -ms-transition-duration: 1s;
  transition-property: color;  /* Standard */
  transition-duration: 1s;
  }

  a.test:hover {
  color: blue;
  }

Używanie skrótu własności:

/* shorthand notation for transition properties */
/* transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay]; */

a.test {
  color: red;
  -moz-transition: color 1s;
  -webkit-transition: color 1s;
  -o-transition: color 1s;
  -ms-transition: color 1s;
  transition: color 1s;
  }

a.test {
  color: blue;
 }

W przeciwieństwie do zwykłych przejść javascript, przejścia CSS3 są przyspieszane sprzętowo, a zatem płynniejsze. Możesz użyć Modernizr, aby dowiedzieć się, czy przeglądarka obsługuje przejścia CSS3, jeśli nie, możesz użyć jQuery jako rezerwowego:

if ( !cssTransitions() ) {
    $(document).ready(function(){
        $(".test").hover(function () {
                $(this).stop().animate({ backgroundColor: "red" },500)
             }, function() {
                 $(this).stop().animate({ backgroundColor: "blue" },500)}    
             );
    }); 
}

Pamiętaj, aby użyć stop (), aby zatrzymać bieżącą animację przed uruchomieniem nowej, w przeciwnym razie, gdy przesuniesz element zbyt szybko, efekt miga jeszcze przez chwilę.

Faraz Kelhini
źródło
11

Dla każdego, kto to znajdzie. Lepiej jest korzystać z wersji interfejsu użytkownika jQuery, ponieważ działa ona na wszystkich przeglądarkach. Kolorowa wtyczka ma problemy z Safari i Chrome. To działa tylko czasami.

Donny V.
źródło
6
-1 Najnowsza wersja kolorowej wtyczki działa idealnie w Chrome.
Andrew
3
Ciężko jest dołączyć dodatkowy skrypt do animowania tła
oneiros
11

Możesz użyć 2 div:

Możesz nałożyć na niego klon i wygasić oryginał, jednocześnie wprowadzając klon.

Po zakończeniu zanikania przywróć oryginał za pomocą nowego pliku bg.

$(function(){
    var $mytd = $('#mytd'), $elie = $mytd.clone(), os = $mytd.offset();

      // Create clone w other bg and position it on original
    $elie.toggleClass("class1, class2").appendTo("body")
         .offset({top: os.top, left: os.left}).hide();

    $mytd.mouseover(function() {            
          // Fade original
        $mytd.fadeOut(3000, function() {
            $mytd.toggleClass("class1, class2").show();
            $elie.toggleClass("class1, class2").hide();            
        });
          // Show clone at same time
        $elie.fadeIn(3000);
    });
});​

Przykład jsFiddle


.toggleClass()
.offset()
.fadeIn()
.fadeOut()

Peter Ajtai
źródło
może zadziałało w pewnym momencie, a przynajmniej nie, nie wydaje się robić tego, czego się od niego oczekuje.
epeleg
@epeleg - dla mnie działa w mac chrome. Klikasz kolorowy prostokąt, który zmienia kolor (2013 -
07-15
Nie wiem jak, ale teraz działa to na moim systemie Windows 7 Chrome. może związane z aktualizacją chrome, którą zrobiłem wczoraj?! w każdym razie, jak powiedziałem, rzeczywiście działa teraz.
epeleg
8

Użyłem kombinacji przejść CSS z JQuery dla pożądanego efektu; oczywiście przeglądarki, które nie obsługują przejścia CSS, nie będą animowane, ale jest to lekka opcja, która działa dobrze w większości przeglądarek, a moje wymagania są akceptowalne.

Jquery, aby zmienić kolor tła:

   $('.mylinkholder a').hover(
        function () {
            $(this).css({ backgroundColor: '#f0f0f0' }); 
        },
        function () {
            $(this).css({ backgroundColor: '#fff' });
        }
    );

CSS przy użyciu przejścia do zanikania zmiany koloru tła

   .mylinkholder a
   {
   transition: background-color .5s ease-in-out;
   -moz-transition: background-color .5s ease-in-out;
   -webkit-transition: background-color .5s ease-in-out; 
  -o-transition: background-color .5s ease-in-out; 
   }
Jimbo Jones
źródło
6

Obecnie wtyczka kolorów jQuery obsługuje następujące nazwane kolory:

aqua:[0,255,255],
azure:[240,255,255],
beige:[245,245,220],
black:[0,0,0],
blue:[0,0,255],
brown:[165,42,42],
cyan:[0,255,255],
darkblue:[0,0,139],
darkcyan:[0,139,139],
darkgrey:[169,169,169],
darkgreen:[0,100,0],
darkkhaki:[189,183,107],
darkmagenta:[139,0,139],
darkolivegreen:[85,107,47],
darkorange:[255,140,0],
darkorchid:[153,50,204],
darkred:[139,0,0],
darksalmon:[233,150,122],
darkviolet:[148,0,211],
fuchsia:[255,0,255],
gold:[255,215,0],
green:[0,128,0],
indigo:[75,0,130],
khaki:[240,230,140],
lightblue:[173,216,230],
lightcyan:[224,255,255],
lightgreen:[144,238,144],
lightgrey:[211,211,211],
lightpink:[255,182,193],
lightyellow:[255,255,224],
lime:[0,255,0],
magenta:[255,0,255],
maroon:[128,0,0],
navy:[0,0,128],
olive:[128,128,0],
orange:[255,165,0],
pink:[255,192,203],
purple:[128,0,128],
violet:[128,0,128],
red:[255,0,0],
silver:[192,192,192],
white:[255,255,255],
yellow:[255,255,0]
рüффп
źródło
1
Czy możesz podać źródło? Dzięki za ogłoszenie btw.
Shrikant Sharat
Ta lista pochodzi z wtyczki kolorów jQuery: plugins.jquery.com/project/color
spoulson
2
-1 Twoja lista kolorów odnosi się do nieaktualnej wersji. Obecna wersja ma co najmniej jeden dodatkowy kolor, który zauważyłem.
Andrew
5

Lubię używać delay (), aby to zrobić, oto przykład:

jQuery(element).animate({ backgroundColor: "#FCFCD8" },1).delay(1000).animate({ backgroundColor: "#EFEAEA" }, 1500);

Może to zostać wywołane przez funkcję, przy czym „element” jest klasą elementu / nazwą / etc. Element natychmiast pojawi się na tle # FCFCD8, przytrzymaj przez sekundę, a następnie przejdzie do #EFEAEA.

Andy
źródło
4

Po prostu dodaj poniższy fragment kodu do swojego skryptu jquery i ciesz się:

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

Zobacz przykład

Odniesienie po więcej informacji

Darush
źródło
Podaj przykłady, aby nie ulegały gniciu linków.
Ege Özcan
2

Natknąłem się na tę stronę z tym samym problemem, ale następujące problemy:

  1. Nie mogę dołączyć dodatkowego pliku wtyczki jQuery do mojego obecnego ustawienia.
  2. Nie czuję się komfortowo wklejając duże bloki kodu, których nie mam czasu przeczytać i zweryfikować.
  3. Nie mam dostępu do css.
  4. Prawie nie miałem czasu na wdrożenie (była to tylko wizualna poprawa strony administratora)

W związku z powyższym prawie wykluczono każdą odpowiedź. Biorąc pod uwagę, że mój zanik koloru był bardzo prosty, zastosowałem następujący szybki hack:

element
  .css('color','#FF0000')
;
$('<div />')
  .css('width',0)
  .animate(
    {'width':100},
    {
      duration: 3000,
      step:function(now){
        var v = (255 - 255/100 * now).toString(16);
        v = (v.length < 2 ? '0' : '') + v.substr(0,2);
        element.css('color','#'+v+'0000');
      }
    }
  )
;

Powyższe tworzy tymczasowy div, który nigdy nie jest umieszczany w obiegu dokumentów. Następnie używam wbudowanej animacji jQuery, aby animować właściwość liczbową tego elementu - w tym przypadku width- która może reprezentować wartość procentową (od 0 do 100). Następnie, używając funkcji krokowej, przenoszę tę animację numeryczną na kolor tekstu za pomocą prostej kombinacji heksadecymalnej.

To samo można osiągnąć setInterval, ale stosując tę ​​metodę, możesz skorzystać z metod animacji jQuery - jak .stop()- i możesz użyć easingi duration.

Oczywiście jest to przydatne tylko do prostych zanikania kolorów, do bardziej skomplikowanych konwersji kolorów musisz użyć jednej z powyższych odpowiedzi - lub zakodować własną matematykę zanikania kolorów :)

Pebbl
źródło
2

Spróbuj tego:

(function($) {  

            var i = 0;  

            var someBackground = $(".someBackground");  
            var someColors = [ "yellow", "red", "blue", "pink" ];  


            someBackground.css('backgroundColor', someColors[0]);  

            window.setInterval(function() {  
                i = i == someColors.length ? 0 : i;  
                someBackground.animate({backgroundColor: someColors[i]}, 3000);  
                i++;  
            }, 30);  

})(jQuery);  

możesz wyświetlić podgląd przykładu tutaj: http://jquerydemo.com/demo/jquery-animate-background-color.aspx

mag
źródło
1

Wtyczka ColorBlend robi dokładnie to, czego chcesz

http://plugins.jquery.com/project/colorBlend

Oto mój kod wyróżnienia

$("#container").colorBlend([{
    colorList:["white",  "yellow"], 
    param:"background-color",
    cycles: 1,
    duration: 500
}]);
Orhaan
źródło
1

Jeśli nie chcesz animować tła przy użyciu tylko podstawowej funkcji jQuery, spróbuj tego:

jQuery(".usercontent").mouseover(function() {
      jQuery(".usercontent").animate({backgroundColor:'red'}, 'fast', 'linear', function() {
            jQuery(this).animate({
                backgroundColor: 'white'
            }, 'normal', 'linear', function() {
                jQuery(this).css({'background':'none', backgroundColor : ''});
            });
        });
użytkownik1029978
źródło
0

Spróbuj go użyć

-moz-transition: background .2s linear;
-webkit-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;
Anton Rodin
źródło
0

Spróbuj tego:

jQuery(".usercontent").hover(function() {
    jQuery(this).animate({backgroundColor:"pink"}, "slow");
},function(){
    jQuery(this).animate({backgroundColor:"white"}, "slow");
});

Zmieniony sposób z efektami:

jQuery(".usercontent").hover(function() {

    jQuery(this).fadeout("slow",function(){
        jQuery(this).animate({"color","yellow"}, "slow");
    });
});
Mary Daisy Sanchez
źródło