Ga naar inhoud

jQuery slide gaat de eerste keer fout


Aanbevolen berichten

Ik ben bezig om secties te maken voor op een website. Blokjes waar straks een inleidende tekst over een onderwerp in komt, en waar je dan op kunt klikken om verder naar een pagina te gaan met meer informatie. 'Als opleuk' heb ik een jQuery slidertje gemaakt, dat bij een hover over het blokje, vanuit de onderkant omhoog komt. Nu werkt dat wel, maar het rare is dat de eerste keer dat je hovert, het blokje maar ten dele tevoorschijn komt (het lijkt wel rechts van de <p>), zie de eerste afbeelding. Doe je het een tweede keer dan gaat het prima. Totdat je de pagina refreshed, of in JSFiddle weer opnieuw op 'Run' klikt. Dan gaat heet weer een keer fout en daarna weer goed. Ik ben al met z-indexen aan de gang geweest, ik heb het betreffende balkje gecleared om eventueel floaten op te heffen, maar ik kom er maar niet vanaf. Bij eerste Hover (fout): [URL=http://imageshack.com/i/0bygz8p/][img:45e98df352]https://imageshack.com/a/img11/525/ygz8.png[/img:45e98df352][/URL] Bij alle volgende hovers (goed): [URL=http://imageshack.com/i/0mylhp/][img:45e98df352]https://imageshack.com/a/img22/9505/ylh.png[/img:45e98df352][/URL] De hele code: [url]http://jsfiddle.net/Gooly/sFprC/16/[/url]
Link naar reactie
Ik kan je niet drect aanwijzen waar de fout ligt, ik heb even zitten stoeien maar kwam er niet uit. Omdat het toch moest kunnen heb ik wat dingen aangepast aan hoe ik het zelf zou doen. Dus minder position en iets meer de flow van de pagina volgen. Daar is dit uitgekomen: http://jsfiddle.net/sFprC/19/ Belangrijke wijzigingen: [list=1:e2c02994fc][*:e2c02994fc]Niet meer een <a> rondom een <img> en een <p>, maar afzonderlijk [*:e2c02994fc]En click() event op de hele section [*:e2c02994fc]De <h2> naar boven (waar die thuishoort volgens de document flow) [*:e2c02994fc]Een <p> rondom de slider en daar het hover() event aan gekoppeld (en de styling verplaatst) [*:e2c02994fc]Wat position en z-indexen weggehaald[/list:o:e2c02994fc] Bij mij werkt het nu zoals je volgens mij bedoelt. Het click() event op de section kun je volgens mij ook dynamisch laten gebeuren door te kijken naar de eerste child('a'), maar daar ben ik nooit zo goed in. :)
Link naar reactie
Tnx, volgens mij heb ik het opgelost. (Weet je overigens zeker dat je de juiste link hebt geplaatst, want bij mij gaat het nog steeds fout, als ik op je link klik) Ik ben even stapsgewijs met jou overwegingen aan de gang gegaan, en nu werkt het prima. Alleen heb ik nu (nog) geen link onder de tekst, maar wel op het slide balkje en op de afbeelding (straks op de tablet komt er geen slidebalkje omhoog natuurlijk) Ik heb de code gecleaned, en op een meer logische volgorde gezet, en wat de truuk volgens mij helemaal deed, was dat ik nu voor het slide balkje een div gebruik. De link heb ik in de div gezet. Logischer eigenlijk ook :) http://jsfiddle.net/Gooly/TV2az/5/
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

×
×
  • Nieuwe aanmaken...