zanikanie koloru na buttonie

[TRIMEK]

chciał bym osiągnąć taki efekt przycisku jaki jest na tej stronie

PRZYKŁAD (http://demo.yootheme.com/jan10/index.php?option=com_content&view=article&id=44&Itemid=53&yt_color=blackblue)

mam na myśli te na których są napisy "Take a look" lub "Read more"

to jest grafika przycisku z tej strony


http://demo.yootheme.com/jan10/templates/yoo_planet/images/variations/black/readmore.png jak widać niema na niej kolorów które pojawiają sie po najechaniu jednak dzięki KejeNowi udało mi się uzyskać kolor tła przycisku za pomocą tego efektu


// Animacja koloru tła
$(document).ready(function(){
$('.button').hover(function() {
$(this).animate({ backgroundColor: "#347ffb" }, 100);
},function() {
$(this).animate({ backgroundColor: "#303030" }, 1000);
});ale efekt pojawia się na wierzchu grafiki i ją pokrywa zamiast za nią jak to jest na przykładowej stronie

wie ktoś może jak zrobić identyczny efekt jak ten co jest na stronie którą podałem??

[moje]

Joomla ma standardowo Mootools, możesz napisać JSa, działającego na Mootools'ie, jest to nic innego jak opóźnienie zmiany efektu- jak mi się przypomni, to pokaże Ci darmowy szablo, który ma taki sam efekt (opóźnienia), narazie musisz poszukać sam.

[TRIMEK]

szukałem też jakiegoś darmowego szablonu i gdy już znalazłem coś co było prawie tym co szukam to okazywało się że działa to na mootools a w tym szablonie który przerabiam została już użyta biblioteka jquery i po wprowadzeniu zmian (pewnie błędnie) doszło do tego że nic nie działało

dzisiaj jeszcze to posprawdzam może uda mi się coś wyczarować z tego co znalazłem.

pozdrawiam

[KejeN]

Hej,
Może po prostu Ty w tych przyciskach nie masz ustawionej grafiki?
Ja teraz sprawdziłem - dodałem do przycisku grafikę z przezroczystościami i działa - animowany kolor widać tam gdzie grafika jest przezroczysta.
No i tak jest też w tym przykładzie, który pokazałeś.

Edit: Koniecznie zacznij korzystać z FireBug-a do FireFox-a (http://getfirebug.com) dzięki niemu sprawdzisz jaką klasę mają te przyciski itp. itd.

[TRIMEK]

właśnie kombinowałem z tą przezroczystością w grafice i nie działa utknąłem w miejscu ;/

obecnie kod jest taki


// Zmiana koloru czcionki
$('a, .button').hover(function() {
$(this).animate({ color: "#347ffb" }, 100);
},function() {
$(this).animate({ color: "#FFFFFF" }, 1000);
});

adres do strony http://www.devil-tools.com.pl/

są wstawione przyciski z elementami przeźroczystymi i nic ;/

[KejeN]

Nie widać żadnej grafiki na buttonach coś źle musiałeś wstawić.
Klasę dla przycisków masz ".art-button"

[TRIMEK]

to już teraz nic nie wiem bo grafika butonu to to http://www.devil-tools.com.pl/templates/devil_v_2/images/Button.png gdy to modyfikuje tzn jakieś kolory itd nanoszę w png to coś sie dzieje ;/

[KejeN]

No fakt jest nie wiem dlaczego nie widziałem jej w firebug-u...
Pewnie jakoś inaczej jest to "zaczarowane" ;)

Spróbuj tak:
// Animacja koloru tła
$(document).ready(function(){
$(" .art-button").hover(function() {
$(this).animate({ backgroundColor: "#00aadd" }, 600);
},function() {
$(this).animate({ backgroundColor: "#303030" }, 400);
});

i to w funkcji animacji tła jak widzisz a nie animacji tekstu.

[TRIMEK]

wpisywałem już tak zaczyna się już coś dziać ale nie zmienia się to za grafiką ale zamiast niej obecnie jest tak ustawione na stronie więc możesz zobaczyć jak to wygląda

[KejeN]

Ok to zmień .art-button na .art-button-wrapper i zobacz czy zadziała.

[TRIMEK]

idealnie :D o to chodziło :D dzięki :D teraz szukam dalej bo jeszcze chce parę zmian wprowadzić ;)