Forum PHP.pl > [jQuery] Animacja

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

ArniPL

5.07.2007, 14:19:09

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?

abc667

5.07.2007, 18:43:38

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 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>...</title>
<script type="text/javascript">
 
	function $(id) {
	return document.getElementById(id);
	}
 
	function changeColor(from, to, delay, numberOfSteps, obj)
	{
 
		from = toDec(from);
		to = toDec(to);
		step = new Array();
		step[0] = Math.floor((to[0] - from[0])/numberOfSteps);
		step[1] = Math.floor((to[1] - from[1])/numberOfSteps);
		step[2] = Math.floor((to[2] - from[2])/numberOfSteps);
 
		changeColor2(from, to, step, delay, obj);
 
	}
 
	function changeColor2(now, to, step, delay, obj)
	{
		if(now[0] < to[0] && now[1] < to[1] && now[2] < to[2])
		{
			obj.style.backgroundColor = toHex(now[0]+step[0], now[1]+step[1], now[2]+step[2]);
			nowTmp = new Array(now[0] + step[0], now[1] + step[1], now[2] + step[2]);
			setTimeout(function() { changeColor2(nowTmp, to, step, delay, obj) }, delay);
		}
	}
 
	function toDec(str)
	{
 
		tmp = new Array(parseInt(str.slice(1,3),16), parseInt(str.slice(3,5),16), parseInt(str.slice(5,7), 16));
		return tmp;
	}
 
	function toHex(red, green, blue)
	{
	var red = red.toString(16)
	var green = green.toString(16);
	var blue = blue.toString(16)
	if(red.length == 1) red = "0"+red;
	if(green.length == 1) green = "0"+green;
	if(blue.length == 1) blue = "0"+blue;
		return "#" + red + green + blue + "";
	}
</script>
 
</head>
<body>
 
<div onclick="changeColor('#000000', '#ffffff', 50, 50, this);" style="width: 500px; height: 300px; background-color: black;">  </div>
 
</body>
</html>
[HTML] pobierz, plaintext

ArniPL

5.07.2007, 22:18:47

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.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.