Evento do clique do jQuery para fazer um div slide para baixo e empurrar a próxima div e fora da viewport

Question

Estou tentando descobrir como fazer o slide jQuery #Content2 e substituir #Content1 por ele, fazendo com que pareça #Content1 está realmente sendo empurrado pelo #Content2 Removendo -o da visualização ...

Em seguida, o mesmo botão que foi clicado para fazer #Content2 substituir #Content1 também precisaria fazer o efeito reverso substituindo #Content2 por #content1, fazendo -os deslizar para cima e empurrar um ao outro para fora do caminho ...

Eu não sou tão bom com o jQuery, então tenho certeza de que fiz isso da maneira errada, mas aqui está o que eu tentei:

$(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

Você só precisa vincular o clique uma vez e pode alternar o efeito do slide. Você poderia tentar algo assim

$(document).ready(function() {

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

Answer 2

Agora você está tentando vincular dois manipuladores de eventos de clique no mesmo elemento. Isso não é possível da maneira como você tenta, mas com os eventos nomes, é:$(#click).bind('click.event1') e depois depois .bind('click.event2')

No entanto, você pode para todos em uma função:

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

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

Não estará na sincronização Perfekt, mas provavelmente ficará bem.