Tijden veranderen
Jquery div animeren
Ik heb 2 divs. Bedoeling is dat beide divs naar links animeren en de voorste dan achter de achterste gaat en dit weer herhaald wordt.
Nu gaat deze aardig alleen nog niet helemaal zoals ik zou willen.
Hij animeert goed naar links. Daarop zou de eerste div achter de 2e moeten gaan en deze gezamelijk weer animeren naar links. Echter gaat de achterste div de hoeveelheid px naar achter en gaat in de 2e loop hij wel goed.
Kan iemand mij feedback geven / fix leveren voor deze bug?
Style CSS
Code (php)
1
2
3
4
5
2
3
4
5
#headerimgs { width:2000px; height:300px; }
.sliderimg { background-position: center top; background-repeat: no-repeat; width:1000px; height:300px; position:relative; float:left; }
.c1 { background-color: blue; }
.c2 { background-color: green; }
.sliderimg { background-position: center top; background-repeat: no-repeat; width:1000px; height:300px; position:relative; float:left; }
.c1 { background-color: blue; }
.c2 { background-color: green; }
HTML
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test div floating</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var activeContainer = 1;
var interval;
var animating = false;
var navigate = function() {
if(animating) {
return;
}
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
moveDiv(currentContainer, activeContainer);
};
var moveDiv = function(currentContainer, activeContainer) {
animating = true;
$("#sliderimg" + activeContainer).animate({
left: '-1000px'
}, { duration: 2000, queue: false, complete: function() { $("#sliderimg" + activeContainer).css({ "left" : "1000px" }); } });
$("#sliderimg" + currentContainer).animate({
left: '-1000px'
}, { duration: 2000, queue: false });
animating = false;
};
interval = setInterval(function() {
navigate();
}, 4000);
});
</script>
</head>
<body>
<div id="header">
<div id="headerimgs">
<div id="sliderimg1" class="sliderimg c1"></div>
<div id="sliderimg2" class="sliderimg c2"></div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test div floating</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var activeContainer = 1;
var interval;
var animating = false;
var navigate = function() {
if(animating) {
return;
}
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
moveDiv(currentContainer, activeContainer);
};
var moveDiv = function(currentContainer, activeContainer) {
animating = true;
$("#sliderimg" + activeContainer).animate({
left: '-1000px'
}, { duration: 2000, queue: false, complete: function() { $("#sliderimg" + activeContainer).css({ "left" : "1000px" }); } });
$("#sliderimg" + currentContainer).animate({
left: '-1000px'
}, { duration: 2000, queue: false });
animating = false;
};
interval = setInterval(function() {
navigate();
}, 4000);
});
</script>
</head>
<body>
<div id="header">
<div id="headerimgs">
<div id="sliderimg1" class="sliderimg c1"></div>
<div id="sliderimg2" class="sliderimg c2"></div>
</div>
</div>
</body>
</html>
We hebben al eerder contact gehad (andere topic).
Ik heb nieuwe poging gedaan om eigen slider te maken.
Daarbij wil ik dat de slider altijd op dezelfde wijze animeert.
Voorbeeld:
ik heb 3 contents die ik wil gebruiken A, B, C
[div 1, content A] is zichtbaar. [div 2, content B] nog niet zichtbaar
div 1 en 2 schuiven naar links. [div 2, content B] is zichtbaar.
div 1 krijgt content C en staat weer achter div 2.
div 2 schuift naar links, [div 1, content C] is zichtbaar.
div 2 krijgt content A en staat weer achter div 1
etc etc.
ik heb dit animeren deels voor elkaar. In mijn code zie je sliderimg1 en 2. In dit geval zou 1 achter 2 moeten gaan maar schuift sliderimg2 nog eens 1000px op.
Zie resultaat: http://jsfiddle.net/eLProva/GP9P4/