Les img sont dans le flux du span. Le padding-right de la première porte interfère sur la deuxième porte. Le span est de largeur max "la largeur de l'écran", et les 2 portes + leur padding font au moins plus de 1,1 la largeur de l'écran, donc il y a un saut de ligne dans le flux lorsque les 2 portes ne tiennent plus sur la ligne.
On peut voir le phénomène avec l'inspecteur de code de Google Chrome par exemple.
De plus lorsque l'on déplace des éléments dans des positions exotiques, il vaut qu'ils soient en position absolute.
J'ai essayé ces modifications du code qui ont l'air de fonctionner :
Code :
- function openDoors() {
- $('#leftDoor').animate({marginLeft: "-=512px"}, 2000);
- $('#rightDoor').animate({marginLeft: "+=512px"}, 2000);
- }
- <div style="overflow:hidden;width:100%">
- <span class="entrance" onclick="openDoors();">
- <img id="leftDoor" class="entrance" src="img/PorteLeft.png" style="position: absolute; margin-left: -512px;">
- <img id="rightDoor" class="entrance" src="img/PorteRight.png" style="position: absolute; margin-left: 0px;">
- </span>
- </div>
|
Message édité par czh le 02-12-2013 à 22:22:10