[JQuery] Hover fadeIn

[Verwijderd]

Beste medetweakers,

Ik ben bezig met een scriptje om 3 blokken naast elkaar in 1 parent blok een fade effectje mee te geven bij een hover. Helaas krijg ik het niet voor elkaar om dit per blok te doen. Als er nu wordt gehoverd over 1 van de 3 blokken dan faden alle blokken de ".hover" content in. Voor zover ik weet moet ik iets toepassen met "this"?

Dit is de code die ik nu heb:

JavaScript:

$("#frontpage-selector .option").mouseenter(function(){
    $('#frontpage-selector .option .hover').hide();
        $('#frontpage-selector .option .hover').fadeIn(650);
});

$("#frontpage-selector .option").mouseleave(function(){             
    $('#frontpage-selector .option .hover').fadeOut(650);
});

Hopelijk kan iemand mij de weg wijzen... alvast bedankt !

[ Voor 4% gewijzigd door BtM909 op 06-02-2013 16:18 ]

[Nedra]

even uit m'n hoofd iets in de richting van

code:

$('#frontpage-selector .option').each(function () {
     $(this).mousenter(function () {
          $('.hover',this).fadeIn ();
     });
});

[TheNephilim]

@Nedra: Je hebt met $('#frontpage-selector .option'); toch alle opties al, waarom dan ook nog each(); gebruiken?

JavaScript:

$("#frontpage-selector .option").hover(
    function () {
        $(this).fadeIn();
    },
    function () {
        $(this).fadeOut();
    },
);

jQuery.hover(); is de functie die je nodig hebt. De eerste functie voert uit wat er gebeuren moet bij mouseover en de tweede voert uit wat er moet gebeuren bij mouseout. $(this) is het element waar op dat moment de muis overheen gaat.

[ Voor 6% gewijzigd door TheNephilim op 31-01-2013 15:40 ]

[Nedra]

je hebt gelijk, die each is nergens voor nodig! Ik was net bezig met een stukje script voor een hover met meerdere opties en daar was de .each erg handig .

[_Erikje_]

Ooit van css transitions gehoord? Niet alles hoeft gescript te worden, zeker in dit geval!!!!

[ Voor 45% gewijzigd door _Erikje_ op 31-01-2013 21:07 ]

[Wary87]

Kijk hier eens: http://tympanus.net/Tutor...lHoverEffects/index5.html

Het source is ook gratis te downloaden. Met een beetje CSS kennis heb je het binnen 5 minuten opgezet.
Source: http://tympanus.net/codro...-hover-effects-with-css3/

[Verwijderd]

.hover verdwijnt wel uit jquery, dus .bind gebruiken

[Munki]

_Erikje_ schreef op donderdag 31 januari 2013 @ 21:06:
Ooit van css transitions gehoord? Niet alles hoeft gescript te worden, zeker in dit geval!!!!

Iets met browser-support.

[BtM909]

Munki schreef op woensdag 06 februari 2013 @ 16:10:
[...]


Iets met browser-support.

Daar weet je niks van, aangezien TS dat verder ook niet heeft gemeld