jQuery animate kolor tekstu w tabeli

0

Jak za pomocą animate zmienić kolor tekstu który jest w tabeli? Funkcja animate wykonuje się po najechaniu na tabeli.

próbowałem:
color: "red"
ale nie działało :)
Jak zrobiłem tak:
$(this).css("color","red");
To działa ale zmienia się od razu bo jest to poza funkcja animate.

<table style=" float:left; margin-left:80px; margin-top: 5px;">
<tr>
<td onclick="window.location='index.html'" style="padding-right: 5px; padding-left: 40px; border-right: solid 2px; border-color: #D4DFEE;">Główna</td>
<td onclick="window.location='index.html'" style="padding-right: 5px; padding-left: 40px; border-right: solid 2px; border-color: #D4DFEE;">Produkty</td>
<td onclick="window.location='index.html'" style="padding-right: 5px; padding-left: 40px; border-right: solid 2px; border-color: #D4DFEE;">Gwarancja</td>
<td onclick="window.location='index.html'" style="padding-right: 5px; padding-left: 40px; border-right: solid 2px; border-color: #D4DFEE;">Serwis</td>
<td onclick="window.location='index.html'" style="padding-right: 5px; padding-left: 40px; border-right: solid 2px; border-color: #D4DFEE;">Kontakt</td>
</tr>
</table>
$("td").mouseover(function() {
	$(this).animate({
		borderRightWidth: "15px",
		paddingLeft: "27px"
	}, 200);
	$(this).css("cursor","pointer");
}).mouseout(function() {
	$(this).animate({
		borderRightWidth: "2px",
		paddingLeft: "40px"
	}, 400);
	$(this).css("cursor","auto");
});

http://mati1988k.phpnet.us/

0

Na górze strony jest menu w którym po najechaniu myszką zmienia się szerokość ramki. Chciałbym aby zmieniał się jeszcze kolor tekstu.
Jak zrobiłem tak:

$("td").mouseover(function() {
        $(this).animate({
                borderRightWidth: "15px",
                paddingLeft: "27px",
                color: "red"                        -------------> to jest dodane
        }, 200);
        $(this).css("cursor","pointer");
}).mouseout(function() {
        $(this).animate({
                borderRightWidth: "2px",
                paddingLeft: "40px"
        }, 400);
        $(this).css("cursor","auto");
});

To nie działało. I nie wiem jak mogę zrobić to inaczej.

0

Spróbuj to:

document.styles['nazwa_twojego_stylu_css'].color='#ffffff'

Strasznie masz tu namotane. :D

0

Nic tu nie jest namotane, on używa jQuery, nie wciskaj mu czystego DOM. Nawet nie mam czegoś takiego jak document.styles w Firefoksie.

@mati1988k: Zainstaluj sobie roszerzenie Firebug i debuguj, powinien być dość klarowny błąd jeśli coś jest nie tak.

0

Tak miałem jak w tym przykładzie, konsola błędów firefox coś takiego pokazuje:
Czas: 2012-07-10 1807
Ostrzeżenie: Oczekiwano końca wartości, ale odnaleziono „NaNpx”. Błąd podczas przetwarzania wartości dla „color”. Deklaracja opuszczona.
Plik źródłowy: file://www/penny/index.html
Wiersz: 0

0

jQuery jest w stanie samo zinterpretować inty jako piksele, wystarczy więc bodaj tak:

$("td").mouseover(function() {
        $(this).animate({
                'borderRightWidth': 15,
                'paddingLeft': 27,
                'color': "#FF0000"
        }, 200);
        $(this).css("cursor","pointer");
}).mouseout(function() {
        $(this).animate({
                'borderRightWidth': 2,
                'paddingLeft': 40
        }, 400);
        $(this).css("cursor","auto");
});

Przy okazji można labele zapisać jako string i kolor notacją heksową, być może coś sie wykłąda jak otrzymuje nazwę koloru.

0

Też niestety nie działa :/. Nie wiem o co tu chodzi.

http://www.sendspace.pl/file/7e9e337744292af0112a509

0

Wrzuć tę stronę na jakiś serwer i zalinkuj tutaj żywe demo, inaczej nie da się nic sensownego ustalić.

0

Nie wiem co to żywe demo :D Ale tutaj jest spakowana stronka:
http://www.sendspace.pl/file/7e9e337744292af0112a509

1

Animacja kolorow w jquery nie jest zaimplementowana standardowo dlatego trzeba sciagnac dodatek ui wersji bodajze minimalnej. Tam podalem link i gdy zobaczysz zrodlo przykladu to procz jquery jest tez dodana biblioteka.

0

Super! Działa.
Trzeba było dodać:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

1 użytkowników online, w tym zalogowanych: 0, gości: 1