jquery slide div dans une div

J'ai un div conteneur de l'élément, ce qui devrait contenir tous les enfants les éléments div.
J'ai vu ce fil: Faites glisser un div à l'écran à l'aide de jQuery et je me demandais comment faire pour le mettre en œuvre (dans un élément div et pas dans le corps).
Le code fonctionne très bien, mais que faire si le "wrapper" élément div a 500px de largeur, comment suis-je censé pour envelopper l'enfant divs? Suis-je besoin d'utiliser d'iframe ou ...?

Pour une meilleure compréhension, j'ai fait cette image:
jquery slide div dans une div

Le rectangle rouge serait une fenêtre et le fond gris du mur. Vous ne pouvez voir à travers la fenêtre et de voir l'actuel élément div. Si vous appuyez sur le bouton de droite -aqua - vous verrez le vert div et si vous appuyez sur le bouton de gauche, vous verrez le jaune div.

Avis: les éléments Div doit se déplacer et non pas le mur.

faire usage de offset() ou position() avec left de propriété et d'animer la div.

OriginalL'auteur Zbarcea Christian | 2013-03-11

  1. 2

    Ajoutez tous les trois div dans une div conteneur, puis la fenêtre s'enrouler autour de la longue div et masquer le dépassement de capacité.

    Exemple, si la zone de la fenêtre est 960px puis la div à l'intérieur serait 3x 960 (2880)

    Vous pouvez centrer en le changeant de position gauche par incréments de 960 (en plaçant le long de la div dans le positionnement relatif et la fenêtre d'overflow hidden) 

    #window{
width:960px;
overflow: hidden;
}

#container{
position: relative;
left: -960px;
}

.content_box{
width:960px;
}

    Ensuite, vous pouvez utiliser javascript (jQuery) pour animer la position de gauche:

    $('#arrow-left').click(function() {
  $('#container').animate({
   left: '-=960'
  }, 5000, function() {
  //Animation complete.
  });
});


$('#arrow-right').click(function() {
  $('#container').animate({
   left: '+=960'
  }, 5000, function() {
  //Animation complete.
  });
});

    Plus sur .animer peuvent être trouvées dans le manuel: http://api.jquery.com/animate/

    ...tu veux dire overflow:hidden;

    OriginalL'auteur kingdomcreation

  2. 2
    <div id="parent">
  <div id="container">
    <div id="child1"></div>
    <div id="child2"></div>
  </div>
</div>

    donner le parent rouge div propriétés css:

    position: relative;
overflow: hidden;
width: 500px;
height: somevalue;

    envelopper les enfants divs avec un autre div "conteneur pour l'exemple" et de lui donner les propriétés css suivantes:

    position: absolute;
width: ;/*overall width of all children divs including margins*/
top: 0;
left: 0;
height: ;/*same as parent*/

    et enfin, pour les enfants divs:

    float: left;
height: ;/*same as parent*/

    OriginalL'auteur razzak