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?
javascript
jquery
colors
jquery-animate
SteveCl
źródło
źródło
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.Odpowiedzi:
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:
źródło
v1
gałąź, aby uzyskać starą wersję (która nadal działa), ale ma znacznie mniejszą wagę.Miałem ten sam problem i naprawiłem go, włączając jQuery UI. Oto kompletny skrypt:
źródło
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ć:
Czysty CSS:
Napisałem niemiecki artykuł na ten temat: http://www.solife.cc/blog/animation-farben-css3-transition.html
źródło
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/
źródło
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)
Ma tylko 1,43 kb po kompresji za pomocą YUI:
Możesz także animować kolory za pomocą przejść CSS3, ale jest to obsługiwane tylko przez nowoczesne przeglądarki.
Używanie skrótu własności:
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:
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ę.
źródło
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.
źródło
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.
Przykład jsFiddle
.toggleClass()
.offset()
.fadeIn()
.fadeOut()
źródło
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:
CSS przy użyciu przejścia do zanikania zmiany koloru tła
źródło
Obecnie wtyczka kolorów jQuery obsługuje następujące nazwane kolory:
źródło
Lubię używać delay (), aby to zrobić, oto przykład:
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.
źródło
Po prostu dodaj poniższy fragment kodu do swojego skryptu jquery i ciesz się:
Zobacz przykład
Odniesienie po więcej informacji
źródło
Natknąłem się na tę stronę z tym samym problemem, ale następujące problemy:
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:
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ćeasing
iduration
.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 :)
źródło
Spróbuj tego:
możesz wyświetlić podgląd przykładu tutaj: http://jquerydemo.com/demo/jquery-animate-background-color.aspx
źródło
Wtyczka ColorBlend robi dokładnie to, czego chcesz
http://plugins.jquery.com/project/colorBlend
Oto mój kod wyróżnienia
źródło
Jeśli nie chcesz animować tła przy użyciu tylko podstawowej funkcji jQuery, spróbuj tego:
źródło
Spróbuj go użyć
źródło
Spróbuj tego:
Zmieniony sposób z efektami:
źródło