jQuery Fade effect over een foto

[Edzeau]

Beste Tweakers,
Ik ben op het moment bezig met het ontwikkelen van een eigen website, en hierbij wil ik ook deels gebruik maken van jQuery. Het is de bedoeling dat ik foto's op deze website ga zetten. Nu kwam ik een website tegen waarop ik een heel mooi effect tegen kwam, maar ik kan zo niet vinden hoe dit effect heet of waar ik het script vandaan zou kunnen halen. Ik hoop dat jullie me kunnen helpen.

De website waar ik het over heb is: http://www.agnieszkaczarnocka.pl/
Als je dan met je muis over een foto gaat aan de rechterkant van het scherm, krijg je een zwart vlak om de foto met rechts daarvan ruimte voor wat info.

Iemand een idee hoe dit script heet of hoe ik dit kan aanpakken?
Ik heb al veel gezocht naar jQuery foto oplossingen en fade in oplossingen, maar dit nog niet gevonden.

Bedankt alvast! Jeroen

[Kwastie]

Als je gewoon de source bekijkt kun je zien hoe hij dat gedaan heeft.

edit: Blijkbaar heb je niet goed gekeken:

JavaScript:

    $('#container dl').hover(function() {
            $(this).find('dt img').fadeTo(1000, 0.85);
        }, function() {
            $(this).find('dt img').fadeTo(1000, 1);
        }
    );
    $('#container dl').hover(function() {
            $(this).find('dd').fadeIn(1000);
        }, function() {
            $(this).find('dd').fadeOut(1000);
        }
    );

[ Voor 76% gewijzigd door Kwastie op 27-03-2011 19:16 ]

[Edzeau]

Dat dacht ik zelf ook, maar ik kon niet vinden wat het nu precies was. Ik kan zelf wel een jQuery script toepassen, maar zelf schrijven lukt me niet. Vandaar deze vraag.

Wat ik precies bedoel: Is er een naam voor dit script, en misschien ook ergens een tutorial? Zo dat ik dit zelf kan toepassen.

[ Voor 27% gewijzigd door Edzeau op 27-03-2011 19:28 ]

[r0b]

Is gewoon een hover met fadeIn die - via CSS - http://www.agnieszkaczarnocka.pl/images/thumb_background.png als background op de dd toevoegd, als ik het zo snel bekijk.

Tutorial:
[google=jquery fadeIn hover] of http://cssbeauty.com/skil...ry-fade-in-on-mouse-over/

Er is geen 'script' die dit doet; dit is standaard jQuery fadeIn / hover werk.
Mocht je meer over jQuery willen leren, raad ik je jQuery for absolute beginners aan op nettuts+.

Dit had je zelf ook wel in een paar tellen kunnen vinden; een kwestie van in de source nakijken welk element het betreft, en dan de JS/CSS bestanden afgaan waar er naar die class/id gerefeerd wordt.

edit:
^^ Wat Kwastie hierboven dus ook zegt.

[ Voor 28% gewijzigd door r0b op 27-03-2011 20:55 ]

[Edzeau]

Thanks voor je hulp. Wat het is, ik ben zelf nog niet zo ver qua scripten, dus ik zie het niet direct in een script terug wat ik moet hebben. Maar hier heb ik wat aan, bedankt!

[MueR]

Ik kan niet veel meer van dit topic maken dan een scriptrequest. Het gaat daarom alsnog op slot. Ik maak uit je posts op dat je niet echt de moeite hebt genoemen zelf iets te proberen. In dat geval is het per definitie niet op zijn plek in de Devschuur, of waar dan ook op GoT.