jQuery evento click per fare una diapositiva div verso il basso e spingere prossima div di viewport

Question

Sto cercando di capire come fare jQuery scorrevole # content2 verso il basso e sostituire # content1 con esso, mentre facendolo apparire come # content1 viene effettivamente spinto verso il basso dalla # content2 rimuovendolo dalla vista ...

Poi lo stesso tasto che è stato cliccato per fare # Content2 sostituire # content1 avrebbe anche bisogno di fare l'effetto contrario, sostituendo # content2 con # content1 facendoli scorrere su e spingere l'altro fuori strada ...

Io non sono un gran che con jQuery, quindi sono sicuro che ho passato su questo nel modo sbagliato, ma ecco che cosa ho provato:

$(document).ready(function() {
$('#click').click(function() {
 if($('#content1').is(':visible')) {
  $('#content1').slideUp();
 }
 else {
  $('#content2').slideDown();
 }
}).click(function() {
 if($('#content1').is(':visible')) {
  $('#content2').slideDown();
 }
 else {
  $('#content1').slideUp();
 }
});

});

Answer 1

Hai solo bisogno di impegnare clic una volta, ed è possibile attivare o disattivare l'effetto di scorrimento. Si potrebbe provare qualcosa di simile

$(document).ready(function() {

  $('#click').click(function() {
    $('#content1').slideToggle();
    $('#content2').slideToggle();
  }
}

Answer 2

Ora si sta cercando di legare due gestori eventi Click allo stesso elemento. Questo non è possibile il modo in cui si tenta, ma con eventi namespace Si tratta di: $(#click).bind('click.event1') e poi .bind('click.event2')

Tuttavia è possibile per tutto in una funzione:

$(document).ready(function() {
    // Pre selected for increased speed
    var content1 = $('#content1');
    var content2 = $('#content2');

    $('#click').click(function() {
        content1.slideToggle();
        content2.slideToggle();
    });
});

Non sarà in sincronia perfekt ma probabilmente guardare OK.