Inserisci elemento in linea e animazione sposta a sinistra

Question

Ho cercato di risolvere questo problema per una settimana e sembra semplice, quindi forse mi manca qualcosa.

Desidero avere un div centrato sullo schermo (o il suo contenitore), quindi inserire un secondo div a destra di esso, in modo che in seguito i due siano centrati (lo spazio su ciascun lato è uguale).

L'inserimento del secondo div non è un problema, ma ho bisogno del primo blocco per scorrere verso il punto in cui si troverà dopo l'inserimento del nuovo blocco.
http://jsfiddle.net/rdbLbnw1/

.container { 
    width:100%; 
    text-align:center; 
} 

.inside { 
    border:solid 1px black; 
    width:100px; 
    height:100px; 
    display:inline-block; 
} 

$(document).ready(function() { 
    $("#add").click(function() { 
     $(".container").append("<div class='inside'></div>"); 
    }); 
}); 

<div class="container"> 
    <div class="inside"></div> 
</div> 
<input id="add" type="button" value="add"/> 

ho bisogno di calcolare in modo esplicito in cui la scatola originale sta per finire e poi animare che, o c'è un modo migliore per farlo?

Answer 1

mi piace la tua domanda in modo deciso a scrivere questo:

$(document).ready(function() { 
    var isInAction = false; 
    var intNumOfBoxes = 1; 
    var intMargin = 10; 
    $containerWidth = $(".container").width(); 
    $insideWidth = $(".inside").width(); 
    $(".inside").css('margin-left',($containerWidth - $insideWidth - intMargin)/2 + 'px'); 
    $("#add").click(function() { 
     if (!isInAction){ 
      isInAction = true; 
      intNumOfBoxes +=1; 
      $(".current").removeClass("current"); 
      $(".container").append("<div class='inside current'></div>"); 
      $('.inside').animate({ 
       'margin-left': '-=' + ($insideWidth + intMargin)/2 + 'px' 
      }, 300, function() { 
       $(".current").css('margin-left',($containerWidth + ((intNumOfBoxes - 2) * ($insideWidth + intMargin)))/2 + 'px'); 
       $(".current").fadeIn(500,function(){ 
        isInAction = false; 
       }); 
      }); 
     } 
    }); 
}); 

aggiungere anche questa classe nel CSS:

.current { 
    display:none; 
} 

Non è necessario modificare le variabili nel codice JS tranne intMargin. puoi cambiare questo var per impostare il margine tra le caselle.

Nota: Questo codice funziona perfettamente anche sui browser meno recenti e non è necessario supportare funzionalità CSS3 come transition.

Aggiornamento: Alcuni bug come i clic ripetuti corretti.

Check JSFiddle Demo

Answer 2

In primo luogo, siamo in grado di animare le uniche cose che hanno valori numerici espliciti come la larghezza, a sinistra oa margine. Non possiamo animare cose come l'allineamento (che in realtà usa la stessa proprietà di margine ma implicitamente, non importa). Quindi, se conosciamo la larghezza del div inserito, aggiungiamolo al nostro contenitore.

1) il centro del contenitore di lasciarsi e aggiungere la transizione ad esso

.container { 
    width: 102px; /* set explicit width; 102 - because of borders */ 
    margin: auto; /* set margin to 'auto' - that will centre the div */ 
    transition: width 0.5s; 
} 

2) Quindi aumentare la larghezza quando add div

3) Ma aspettate! Se aggiungiamo div a contenitori troppo stretti, verrà aggiunto in basso, non a destra. Quindi abbiamo bisogno di un altro contenitore impostato sulla larghezza appropriata prima dello.

Vedere l'esempio finale on JSFiddle.

BTW, rimuovi tutte le interruzioni di linea e le linguette dal codice quando si utilizza il blocco in linea, perché causerà spazi tra i blocchi.