jQuery - эффект скользящих панелей текста

Question

У меня есть следующий код в HTML / CSS: http://jsfiddle.net/XmRNh/

Как видите, есть контейнер "About" с тремя "Slides" внутри. 1-й слайд всегда открыт. Исходное состояние 2-го и 3-го слайдов заключается в том, что они скрыты за кадром.

Я хотел бы использовать jQuery, чтобы «сдвинуть» второй и третий слайд на место при нажатии соответствующей кнопки, а затем сдвинуть его с экрана при нажатии соответствующей кнопки закрытия.

В документации по jQuery я вижу, как сдвигать и сдвигать слайд, а не как сдвигать влево или вправо. Может ли кто-нибудь помочь мне достичь этого?

Спасибо Zach

РЕДАКТИРОВАТЬ: возможно ли сделать первый слайд за кадром / скрытым при загрузке страницы, и он может скользить слева, как только страница загрузится?

Answer 1

Оформить http://docs.jquery.com/UI/Effects/Slide - используя методы show / hide, вы можете передать больше параметров, таких как направление. Э.Г.

$('#about-slide-2').show("slide", { direction: "left" }, 1000);

Чтобы отобразить первую панель при загрузке, вы должны установить ее стиль отображения в html как этот

style='display:none'

Тогда используйте этот JavaScript

$(function() {
  $('#about-slide-1').show("slide", { direction: "left" }, 1000);
});

Обратите внимание, что эти эффекты включены в jQueryUI, а не в стандартную jQuery, но я думаю, что вы можете скачать пользовательскую сборку, которая просто включает необходимые эффекты.

Answer 2

Я знаю, что для этого вам нужно использовать функцию .animate() в jQuery

http://api.jquery.com/animate/

В этом уроке пару лет назад приведен пример скольжения с использованием ширины делителя.

$(document).ready(function() {
  $('#slidewidth button').click(function() {
    $(this).next().animate({width: 'toggle'});
  });
});

Учебник http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

Я могу ошибаться, но я уверен, что это правильный путь.

Удачи!