Szukam inspiracji do projektu nowej strony www i wpadł mi w oko ciekawy motyw menu na tej stronie www.ecocomfort.pl/strefa-specjalisty/rekuperatory/ Chodzi mi o menu główne, gdzie po najechaniu kursorem na kafelek pojawia się efekt przenikania. Ktoś wie jak coś takiego zrobić?
Wkładasz obrazek pod dany element, a później zmieniasz jego przeźroczystość(opacity) za pomocą funkcji animate (jquery)
jQuery nie jest do tego potrzebne. Wystarczy pseudoslektor :hover w cssie.
To weź teraz wytłumacz mi jak za pomocą w/w selektora zrobisz przejście z przykładu 
Bez problemu za pomocą transition…
EDIT:
Odpowiedź na pytanie:
przykładowy kod menu:
<ul class="main-menu">
<li class="menu-item">Home</li>
<li class="menu-item">Contact</li>
</ul>
CSS:
.menu-item {
color: #cbcbcb;
transition: color 1s, backgroud-image 1s;
}
.menu-item.current, .menu-item:hover {
color: #cbffcb;
background-image: url(adress/strzalka.png);
background-position: 0 0; /* jeśli potrzeba */
}
Nie ma sensu w tym przypadku robić tego na opacity, wystarczy transition na odpowiednie atrybuty - te które się zmieniają.
Na szybko dałem pierwszy przykład 
chłopaki już wytłumaczyli 
można oczywiście zrobić to jeszcze sprawniej. Im mniej JSa przy animacjach tego typu tym lepiej. Cssy wystarczają w zupełności do osiągnięcia często zdumiewających efektów.
No tak, co kto lubi. Jeden woli prościej a drugi pisze dla wszystkich nie tylko dla tych z najnowszą przeglądarką
W obecnej chwili to wygląda tak że jeśli jakiś efekt nie jest obsługiwany to prawdopodobnie nie ma sensu też tego robić w JS. Dlatego że może to być np stary telefon, słaby komputer. Więc po co robić animacje w JS i przeciążać stronę pod kątem skryptów jeśli user będzie miał problem z jej obsługa bo będzie ona strasznie długo się ładowała albo powolnie działała ze względu na dużą ilość działających w tle skryptów JS. JS lepiej zostawić do rzeczy bardziej potrzebnych i niezbędnych jak pobieranie danych czy aktualizacja.
Uważam, że lepiej by strona działała bez bajerów czyli animacji, ale działała i była wygodna w użytkowaniu. Często spotkać można strony ładne efektowne z masą animacji, ale strasznie toporne przez to. Często przegięcie jest już w samym formularzu filtrującym wyniki, co klik to Ci filtruje i “zawiesza” stronę i formularz, a można by poczekać aż user kliknie przycisk filtruj jak zaznaczy wszystkie kryteria. Szkoda jest na to i transferu i serwera tak naprawdę. Jeśli user chce określić 5 parametrów które mają być kryteriami wyszukiwania/wyświetlania to 4 razy bez sensu wyświetlane są wyniki które go nie interesują.
Jest to temat rzeka i nie ma słusznego wyboru, czasami warto jednak iść na kompromis. Osobiście wolę stronę mniej efektowną - bez animacji, ale płynnie działającą, gdy animacje zaczynają się wręcz zawieszać, albo jest ich za dużo można stracić mocno na usability.
Można zrobić dużo. Zgadzam się z przedmówcą. Może być ładnie i działać i na starych przeglądarkach i urządzeniach jak np iPad 1. Wbrew pozorom jest multum możliwości obejścia problemów z wydajnością.