Probleempje met animate!
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>
<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>
CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* Wat blok*/
#wat {
display: block;
background-image: url('../afbeeldingen/wat.png');
background-color: gray;
width: 600px;
height: 340px;
margin-left: 50px;
-webkit-box-shadow: 1px 1px 2px;
box-shadow: 1px 1px 2px;
position: relative;
}
#wathover {
display: none;
background-color: #d8d8d8;
width: 600px;
height: 150px;
float: right;
margin-top: 190px;
position: absolute;
bottom: 0; left: 0;
}
#watpopup {
margin-left: 75px;
font-size: 25px;
margin-top: 55px;
}
#watinside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.wat_text {
font-size: 25px;
margin-left: 25px;
}
#wat {
display: block;
background-image: url('../afbeeldingen/wat.png');
background-color: gray;
width: 600px;
height: 340px;
margin-left: 50px;
-webkit-box-shadow: 1px 1px 2px;
box-shadow: 1px 1px 2px;
position: relative;
}
#wathover {
display: none;
background-color: #d8d8d8;
width: 600px;
height: 150px;
float: right;
margin-top: 190px;
position: absolute;
bottom: 0; left: 0;
}
#watpopup {
margin-left: 75px;
font-size: 25px;
margin-top: 55px;
}
#watinside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.wat_text {
font-size: 25px;
margin-left: 25px;
}
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?
Alvast bedankt voor de moeite!
Gewijzigd op 10/07/2013 13:49:04 door Tom Verassing
Probeer bij je functies de on te gebruiken ipv hover()
dus dan krijg je
$("#wat").on('hover', function()
ipv
$("#wat").hover(function()
Als je je JS code wat netter indent kan ik er misschien een blik op werpen...
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?
Gewijzigd op 10/07/2013 13:51:42 door Tom Verassing
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:
Code (php)
1
2
3
2
3
#wathover {
bottom: 0;
}
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?)
Gewijzigd op 12/07/2013 10:55:39 door Kris Peeters
Bij vrij extreem gebruik, gebeurt het inderdaad wel.
Ik zal eens wat testen met een paar vertragingen.
---
Dit helpt:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function() {
var timer = null;
var isMouseOver = false;
$("#wat").hover(
function() {
isMouseOver = true;
clearTimeout(timer);
timer = setTimeout(fade, 100);
},
function() {
isMouseOver = false;
clearTimeout(timer);
timer = setTimeout(fade, 100);
}
);
function fade() {
if (isMouseOver) {
fadeIn()
}
else {
fadeOut();
}
}
function fadeIn() {
$('#wathover').stop().animate({height:'show'}, 100);
}
function fadeOut() {
$('#wathover').stop().animate({height:'hide'}, 100);
}
});
var timer = null;
var isMouseOver = false;
$("#wat").hover(
function() {
isMouseOver = true;
clearTimeout(timer);
timer = setTimeout(fade, 100);
},
function() {
isMouseOver = false;
clearTimeout(timer);
timer = setTimeout(fade, 100);
}
);
function fade() {
if (isMouseOver) {
fadeIn()
}
else {
fadeOut();
}
}
function fadeIn() {
$('#wathover').stop().animate({height:'show'}, 100);
}
function fadeOut() {
$('#wathover').stop().animate({height:'hide'}, 100);
}
});
Wat waarschinlijk ook helpt:
Code (php)
1
2
3
2
3
#wat {
overflow: hidden;
}
overflow: hidden;
}
Gewijzigd op 12/07/2013 11:40:45 door Kris Peeters
Dat stukje code wat je geschreven helpt goed. Alleen is het maar bedoeld voor één div.
Nou heb ik er geprobeerd een functie van te maken zodat ik het voor meerder divs kan gebruiken maar ik krijg dat niet aan het werk.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function showDiv(divid, divhover) {
var timer = null;
var isMouseOver = false;
$("#"+divid).hover(
function() {
isMouseOver = true;
clearTimeout(timer);
timer = setTimeout(fade, 100);
},
function() {
isMouseOver = false;
clearTimeout(timer);
timer = setTimeout(fade, 100);
}
);
function fade() {
if (isMouseOver) {
fadeIn()
}
else {
fadeOut();
}
}
function fadeIn() {
$('#'+divhover).stop().animate({height:'show'}, 100);
}
function fadeOut() {
$('#'+divhover).stop().animate({height:'hide'}, 100);
}
}
var timer = null;
var isMouseOver = false;
$("#"+divid).hover(
function() {
isMouseOver = true;
clearTimeout(timer);
timer = setTimeout(fade, 100);
},
function() {
isMouseOver = false;
clearTimeout(timer);
timer = setTimeout(fade, 100);
}
);
function fade() {
if (isMouseOver) {
fadeIn()
}
else {
fadeOut();
}
}
function fadeIn() {
$('#'+divhover).stop().animate({height:'show'}, 100);
}
function fadeOut() {
$('#'+divhover).stop().animate({height:'hide'}, 100);
}
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<head>
<title>Double You Media</title>
<link rel='stylesheet' href='css/main.css' />
<script src="javascript/javascript.js"></script>
<script src="http://code.jquery.com/jquery-latest.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() {
showDiv(wat,wathover);
});
</script>
</head>
<title>Double You Media</title>
<link rel='stylesheet' href='css/main.css' />
<script src="javascript/javascript.js"></script>
<script src="http://code.jquery.com/jquery-latest.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() {
showDiv(wat,wathover);
});
</script>
</head>
En over die meerdere geladen jquery's:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
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.
Toevoeging op 15/07/2013 12:29:38:
Kris Peeters op 12/07/2013 10:18:18:
Dat zal wel dit zijn:
#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?)
Code (php)
1
2
3
2
3
#wathover {
bottom: 0;
}
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 ;)
Gewijzigd op 15/07/2013 12:23:00 door Tom Verassing
Tom Verassing op 15/07/2013 12:13:37:
...zodat ik het voor meerder divs kan gebruiken ...
Dan moeten we het element meegeven aan de functies.
Dan moeten we ook met classes werken. Met name: id="wathover" geef je een class="hover"
En dat dus voor elke div (zie voorbeeld code)
Ik zal voor mijn gemak en voor de duidelijkheid maar gewoon alles volledig posten (Zoek zelf naar de 7 verschillen :) ).
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="javascript/jquery.lightbox_me.js"></script>
<script>
$(document).ready(function() {
var timer = null;
var isMouseOver = false;
$("#wat, #wat2").hover(
function() {
var elm = this; // en dit element gaan we meegeven aan de andere functies.
isMouseOver = true;
clearTimeout(timer);
timer = setTimeout(function(e) {fade(elm)}, 100);
},
function() {
var elm = this;
isMouseOver = false;
clearTimeout(timer);
timer = setTimeout(function(e) {fade(elm)}, 100);
}
);
function fade(elm) {
if (isMouseOver) {
fadeIn(elm)
}
else {
fadeOut(elm);
}
}
function fadeIn(elm) {
$(elm).find('.hover').stop().animate({height:'show'}, 100); // elm is de buitenste container. $(elm).find('.class') zoekt naar een child element met class="hover" ...
}
function fadeOut(elm) {
$(elm).find('.hover').stop().animate({height:'hide'}, 100);
}
});
</script>
<style>
#wat {
display: block;
background-image: url('../afbeeldingen/wat.png');
background-color: gray;
width: 600px;
height: 340px;
margin-left: 50px;
-webkit-box-shadow: 1px 1px 2px;
box-shadow: 1px 1px 2px;
position: relative;
overflow: hidden;
}
#wathover {
display: none;
background-color: #d8d8d8;
width: 600px;
height: 150px;
float: right;
margin-top: 190px;
position: absolute;
bottom: 0; left: 0;
}
#watpopup {
margin-left: 75px;
font-size: 25px;
margin-top: 55px;
}
#watinside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.wat_text {
font-size: 25px;
margin-left: 25px;
}
#wat2 {
display: block;
background-image: url('../afbeeldingen/wat.png');
background-color: gray;
width: 600px;
height: 340px;
margin-left: 50px;
-webkit-box-shadow: 1px 1px 2px;
box-shadow: 1px 1px 2px;
position: relative;
overflow: hidden;
}
#wathover2 {
display: none;
background-color: #d8d8d8;
width: 600px;
height: 150px;
float: right;
margin-top: 190px;
position: absolute;
bottom: 0; left: 0;
}
#watpopup2 {
margin-left: 75px;
font-size: 25px;
margin-top: 55px;
}
#watinside2 {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
</style>
</head>
<body>
<div id="container" >
<div id="logo"></div>
<div id="wat">
<div id="wathover" class="hover">
<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>
<br><br>
<div id="wat2">
<div id="wathover2" class="hover">
<div id="watpopup2">
Dit is een test. Klik <a href="#" onclick="popup(this)">hier</a> voor meer informatie.
<div id="watinside2">
<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>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="javascript/jquery.lightbox_me.js"></script>
<script>
$(document).ready(function() {
var timer = null;
var isMouseOver = false;
$("#wat, #wat2").hover(
function() {
var elm = this; // en dit element gaan we meegeven aan de andere functies.
isMouseOver = true;
clearTimeout(timer);
timer = setTimeout(function(e) {fade(elm)}, 100);
},
function() {
var elm = this;
isMouseOver = false;
clearTimeout(timer);
timer = setTimeout(function(e) {fade(elm)}, 100);
}
);
function fade(elm) {
if (isMouseOver) {
fadeIn(elm)
}
else {
fadeOut(elm);
}
}
function fadeIn(elm) {
$(elm).find('.hover').stop().animate({height:'show'}, 100); // elm is de buitenste container. $(elm).find('.class') zoekt naar een child element met class="hover" ...
}
function fadeOut(elm) {
$(elm).find('.hover').stop().animate({height:'hide'}, 100);
}
});
</script>
<style>
#wat {
display: block;
background-image: url('../afbeeldingen/wat.png');
background-color: gray;
width: 600px;
height: 340px;
margin-left: 50px;
-webkit-box-shadow: 1px 1px 2px;
box-shadow: 1px 1px 2px;
position: relative;
overflow: hidden;
}
#wathover {
display: none;
background-color: #d8d8d8;
width: 600px;
height: 150px;
float: right;
margin-top: 190px;
position: absolute;
bottom: 0; left: 0;
}
#watpopup {
margin-left: 75px;
font-size: 25px;
margin-top: 55px;
}
#watinside {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
.wat_text {
font-size: 25px;
margin-left: 25px;
}
#wat2 {
display: block;
background-image: url('../afbeeldingen/wat.png');
background-color: gray;
width: 600px;
height: 340px;
margin-left: 50px;
-webkit-box-shadow: 1px 1px 2px;
box-shadow: 1px 1px 2px;
position: relative;
overflow: hidden;
}
#wathover2 {
display: none;
background-color: #d8d8d8;
width: 600px;
height: 150px;
float: right;
margin-top: 190px;
position: absolute;
bottom: 0; left: 0;
}
#watpopup2 {
margin-left: 75px;
font-size: 25px;
margin-top: 55px;
}
#watinside2 {
display: none;
background-color: white;
width: 500px;
height: 400px;
font-size: 15px;
font-family: Georgia;
overflow: auto;
}
</style>
</head>
<body>
<div id="container" >
<div id="logo"></div>
<div id="wat">
<div id="wathover" class="hover">
<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>
<br><br>
<div id="wat2">
<div id="wathover2" class="hover">
<div id="watpopup2">
Dit is een test. Klik <a href="#" onclick="popup(this)">hier</a> voor meer informatie.
<div id="watinside2">
<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>
</div>
</body>
Gewijzigd op 15/07/2013 12:50:25 door Kris Peeters