jQuery click событие, чтобы сделать div скользящим и вытолкнуть следующий div из области просмотра

Question

Я пытаюсь выяснить, как заставить jQuery сдвинуть # content2 вниз и заменить # content1 им, при этом создавая впечатление, что # content1 фактически отталкивается # content2, удаляя его из вида ...

Тогда той же кнопке, которая была нажата, чтобы заставить # content2 replace # content1 также сделать обратный эффект, заменив # content2 на # content1, заставляя их скользить вверх и отталкивать друг от друга ...

Я не так уж и хорош с jQuery, так что я уверен, что ошибся, но вот что я попробовал:

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

Вам нужно только один раз привязать клик, и вы можете переключать эффект слайда. Вы можете попробовать что-то вроде этого

$(document).ready(function() {

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

Answer 2

Теперь вы пытаетесь привязать два обработчика события щелчка к одному элементу. Это невозможно, как вы пытаетесь, но с событиями в пространстве имен это: $(#click).bind('click.event1'), а затем и позже .bind('click.event2')

Однако вы можете все в одной функции:

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

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

Это не будет в идеальной синхронизации, но, вероятно, будет выглядеть хорошо.