Jak zmienić zawartość tekstu za pomocą jQuery?
Chodzi o to, aby zwrócić uwagę użytkownika na przekaz.
jquery
css
background-color
fade
mrblah
źródło
źródło
Odpowiedzi:
Ta dokładna funkcjonalność (3-sekundowa poświata do podświetlenia wiadomości) jest zaimplementowana w interfejsie użytkownika jQuery jako efekt podświetlenia
https://api.jqueryui.com/highlight-effect/
Kolor i czas trwania są zmienne
źródło
Jeśli chcesz specjalnie animować kolor tła elementu, uważam, że musisz dołączyć framework jQueryUI. Następnie możesz:
jQueryUI ma kilka wbudowanych efektów, które mogą być przydatne również dla Ciebie.
http://jqueryui.com/demos/effect/
źródło
'slow'
można zastąpić sekundami ... gdzie 1000 to 1 sekunda ... i tak dalej.Wiem, że chodziło o to, jak to zrobić za pomocą Jquery, ale ten sam efekt można osiągnąć za pomocą prostego css i tylko małego jquery ...
Na przykład, masz element div z klasą „box”, dodaj następujący plik css
a następnie użyj funkcji AddClass, aby dodać kolejną klasę z innym kolorem tła, na przykład „podświetlone pole” lub coś podobnego z następującym css:
Jestem początkującym i być może są wady tej metody, ale może komuś się przyda
Oto kodepen: https://codepen.io/anon/pen/baaLYB
źródło
Zwykle możesz użyć metody .animate () do manipulowania dowolnymi właściwościami CSS, ale w przypadku kolorów tła musisz użyć wtyczki kolorów . Po dołączeniu tej wtyczki możesz użyć czegoś, co wskazali inni,
$('div').animate({backgroundColor: '#f00'})
aby zmienić kolor.Jak napisali inni, część z tego można zrobić również za pomocą biblioteki interfejsu użytkownika jQuery.
źródło
Korzystanie tylko z jQuery (bez biblioteki / wtyczki UI). Nawet jQuery można łatwo wyeliminować
Demo: http://jsfiddle.net/5NB3s/2/
źródło
W zależności od obsługi Twojej przeglądarki możesz użyć animacji CSS. Przeglądarki obsługują IE10 i nowsze wersje dla animacji CSS. Jest to fajne, więc nie musisz dodawać zależności od interfejsu użytkownika jquery, jeśli jest to tylko małe jajko wielkanocne. Jeśli jest to integralna część Twojej witryny (czyli wymagana dla IE9 i starszych), skorzystaj z rozwiązania interfejsu użytkownika jquery.
Następnie utwórz zdarzenie jQuery click, które dodaje
your-animation
klasę do elementu, który chcesz animować, wywołując zanikanie tła z jednego koloru na drugi:źródło
Napisałem super prostą wtyczkę jQuery, aby osiągnąć coś podobnego. Chciałem czegoś naprawdę lekkiego (to minifikacja 732 bajtów), więc włączenie dużej wtyczki lub interfejsu użytkownika było dla mnie wykluczone. Nadal jest trochę szorstki na krawędziach, więc opinie są mile widziane.
Możesz sprawdzić wtyczkę tutaj: https://gist.github.com/4569265 .
Korzystając z wtyczki, łatwo byłoby stworzyć efekt podświetlenia, zmieniając kolor tła, a następnie dodając,
setTimeout
aby uruchomić wtyczkę, aby przywrócić pierwotny kolor tła.źródło
Aby przejść między 2 kolorami za pomocą tylko prostego kodu JavaScript:
Źródło: http://www.pagecolumn.com/javascript/fade_text.htm
źródło
javascript zmienia kolor na biały bez jQuery lub innej biblioteki:
W druku kolor żółty jest minus niebieski, więc zaczynając od trzeciego elementu rgb (niebieskiego) poniżej 255 zaczyna się od żółtego podświetlenia. Następnie
10+
ustawienievar unBlue
wartości zwiększa minus niebieski, aż osiągnie 255.źródło