Door
Tom Verassing
op 09-07-2013 14:40
gewijzigd op 10-07-2013 13:49
1.189 views
Hallo,
Ik heb een template voor een klant voor mij gemaakt. Nou doen de animaties van de div's het wel. Maar als je er een stuk of 10-20 keer over heen gaat dan beginnen ze maar half tot bijna niet te werken. Hier is de code:
HTML / JQUERY
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="javascript/jquery.lightbox_me.js"></script>
<script>
$(document).ready(function(){
$("#wat").hover(function(){
$('#wathover').stop().animate({
height:'show'},100);},
function(){
$('#wathover').stop().animate(
{height:'hide'},100);}
);
});
</script>
</head>
<body>
<div id="container" >
<div id="logo"></div>
<div id="wat">
<div id="wathover">
<div id="watpopup">Dit is een test. Klik <a href="#" onclick="popup(this)">hier</a> voor meer informatie.
<div id="watinside">
<p class="wat_text"><br><br>Hier <br><br>kan <br><br>u nog veel<br><br> meer lezen over <br><br>het onderwerp <br><br>wat u wilt aanbieden</p>
</div>
</div>
</div>
</div>
Je kan het hele geheel bekijken op: www.dymedia.nl/doubleyoumedia Heeft iemand een idee wat dit veroorzaakt en hoe het eventueel verholpen kan worden? En dan nog een klein vraagje. Bij het "wat" divje komt de animatie van beneden. Maar op één of andere manier krijg ik dit niet voor mekaar bij de rest van de div's. Daar komt de animatie van boven. Enig idee hoe ik dit kan wijzigen?
Je gebruikt iets wat binnenkort deprecated is ( dus niet bestaat ) ik zie dat als enige melding wanneer ik alles test met safari's developers tool. Ik zou even je code wat inkorten en alleen de Javascript behouden en de rest weghalen omdat dit niet heel relevant is.
Probeer bij je functies de on te gebruiken ipv hover()
Ok heb de code in het orignele bericht wat aangepast.. Deze code geld voor het grote div op de pagina. In principe is de code voor de rest van de div's identiek.
Dus probleem 1:
De animatie werkt wel. Maar als ik met mijn muis snel over de div's heen gaan raken de animaties op een gegeven moment in de war en gaan ze het of half doen of helemaal niet.
Probleem 2:
Zoals je kan zien komt de animatie in de grootste div van beneden.. Maar in de rest van divjes van boven. Ik wil dit graag allemaal van onder hebben? Hoe doe ik dit?
Ik merk wel op dat je jQuery twee keer laadt; de tweede keer haal je een oudere versie boven.
Schrap lijn 3 al eens.
Een nieuwere jQuery versie zou al kunnen helpen.
-----
Probleem 2:
Dat zal wel dit zijn:
#wathover {
bottom: 0;
}
#wathover is gepositioneerd op de bodem. En dus zal de height groeien van de bodem naar de top.
---
(niet dat dat iets uit maakt ... staat "wat" ergens voor?)
Werkt het bij jou wel? Ook als je 20 keer over die div's heen gaat? Bij mij stopt het dan met goed werken. De div's komen dan maar half naar boven of helemaal niet meer. Ik zal je suggestie zsm proberen.
als ik deze : <script src="http://code.jquery.com/jquery-latest.min.js"></script> weghaal dan doet de animatie helemaal niks meer.
als ik deze: <script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> weghaal.
Dan doet de animatie het prima. Ook als je er heel vaak overheen gaat met je muis. Maar in die div kom een <a> te staan waar je op klikt zodat er een soort van popup van een div komt waar nog meer informatie komt te staan. Dus als ik de bovenste weghaal dan doe die popup het niet meer.
[size=xsmall]Toevoeging op 15/07/2013 12:29:38:[/size]
Kris Peeters op 12/07/2013 10:18:18
Dat zal wel dit zijn:
#wathover {
bottom: 0;
}
#wathover is gepositioneerd op de bodem. En dus zal de height groeien van de bodem naar de top.
---
(niet dat dat iets uit maakt ... staat "wat" ergens voor?)
Als ik de bottom bij de andere divs op 0 zet dan schruif deze naar links onder van het scherm bij mij..
en de wat staat voor wat,hoe,waarom etc steekwoorden voor journalistiek ;)
