Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery] Animacja, Płynna zmiana koloru tła
ArniPL
post
Post #1





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 19.11.2006

Ostrzeżenie: (0%)
-----

Witam,
Próbuję zrobić za pomocą biblioteki jQuery płynnie zmieniający się kolor tła po najechaniu myszką na diva.
Jedynym rozwiązaniem jakie przyszło mi do głowy jest:
Kod
$(function(){
    $("#Form").mouseover(function(){$("#Form").animate({backgroundColor: "black"}, 1000);});
});

Ale to nie działa. Działa natomiast zmiana natychmistowa (bez płynnego przejścia) poprzez:
Kod
$(function(){
    $("#Form").mouseover(function(){$("#Form").css({backgroundColor: "black"});});
});

Funkcja animate napewno działa dobrze bo kod:
Kod
$(function(){
    $("#Form").mouseover(function(){$("#Form").animate({opacity: 0}, 1000);});
});

Powoduje zamierzony efekt czyli płynne zanikanie. To samo z backgroundColor już nie działa.
Ktoś wie jak rozwiązać ten problem?


--------------------
Sprzęt: Athlon64 3800+, 2GB RAM, Radeon X850
Oprogramowanie: WinXP/Ubuntu 7.10(Gnome+Beryl), Notepad2, Opera 9.50/Firefox 3, MirandaIM 0.7.3
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 2)
abc667
post
Post #2





Grupa: Zarejestrowani
Postów: 229
Pomógł: 0
Dołączył: 29.05.2007

Ostrzeżenie: (0%)
-----

zapewne jQuery nie ma zaimplementowanej tej funkcji, a to nie jest takie proste jak z opacity, tutaj przedstawiam ci przykładowe rozwiązanie bez jquery

(testowane na ff, oczywiście to tylko demonstracja, do funkcjonalności pełnej jeszcze dużo by trzeba dopisać)

[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>...</title>
  5. <script type="text/javascript">
  6.  
  7. 	function $(id) {
  8. 	return document.getElementById(id);
  9. 	}
  10.  
  11. 	function changeColor(from, to, delay, numberOfSteps, obj)
  12. 	{
  13.  
  14. 		from = toDec(from);
  15. 		to = toDec(to);
  16. 		step = new Array();
  17. 		step[0] = Math.floor((to[0] - from[0])/numberOfSteps);
  18. 		step[1] = Math.floor((to[1] - from[1])/numberOfSteps);
  19. 		step[2] = Math.floor((to[2] - from[2])/numberOfSteps);
  20.  
  21. 		changeColor2(from, to, step, delay, obj);
  22.  
  23. 	}
  24.  
  25. 	function changeColor2(now, to, step, delay, obj)
  26. 	{
  27. 		if(now[0] < to[0] && now[1] < to[1] && now[2] < to[2])
  28. 		{
  29. 			obj.style.backgroundColor = toHex(now[0]+step[0], now[1]+step[1], now[2]+step[2]);
  30. 			nowTmp = new Array(now[0] + step[0], now[1] + step[1], now[2] + step[2]);
  31. 			setTimeout(function() { changeColor2(nowTmp, to, step, delay, obj) }, delay);
  32. 		}
  33. 	}
  34.  
  35. 	function toDec(str)
  36. 	{
  37.  
  38. 		tmp = new Array(parseInt(str.slice(1,3),16), parseInt(str.slice(3,5),16), parseInt(str.slice(5,7), 16));
  39. 		return tmp;
  40. 	}
  41.  
  42. 	function toHex(red, green, blue)
  43. 	{
  44. 	var red = red.toString(16)
  45. 	var green = green.toString(16);
  46. 	var blue = blue.toString(16)
  47. 	if(red.length == 1) red = "0"+red;
  48. 	if(green.length == 1) green = "0"+green;
  49. 	if(blue.length == 1) blue = "0"+blue;
  50. 		return "#" + red + green + blue + "";
  51. 	}
  52. </script>
  53.  
  54. </head>
  55. <body>
  56.  
  57. <div onclick="changeColor('#000000', '#ffffff', 50, 50, this);" style="width: 500px; height: 300px; background-color: black;">  </div>
  58.  
  59. </body>
  60. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
ArniPL
post
Post #3





Grupa: Zarejestrowani
Postów: 30
Pomógł: 0
Dołączył: 19.11.2006

Ostrzeżenie: (0%)
-----

Dzięki za te rozwiązanie ale mógłbym to zrobić również za pomocą biblioteki mootools. Z jQuery próbowałem tylko z ciekawości. Z tego co widzę to w zakresie efektów mootools ma znacznie większe możliwości. smile.gif


--------------------
Sprzęt: Athlon64 3800+, 2GB RAM, Radeon X850
Oprogramowanie: WinXP/Ubuntu 7.10(Gnome+Beryl), Notepad2, Opera 9.50/Firefox 3, MirandaIM 0.7.3
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 20.08.2025 - 13:35
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn