AJAX заменить и прокрутить в сторону

Question

Мне удалось найти множество способов загрузки и замены контента на ajax и скрытия / показа с эффектом.

Но я ищу способ вставить новый контент в div, покастарый контент выскальзывает.

Полагаю, для этого потребуется добавить загруженный контент после уже существующего контента, но как мне выровнять существующий / загруженный контент по горизонтали и прокрутить внутри div?

Есть предложения для хороших плагинов?

Answer 1

Создание раздвижной панели сравнительно легко.Сначала вы создаете контейнер с фиксированной шириной, который скрывает переполнение.Затем у вас есть движущаяся панель с большой шириной, т.е. 5000 пикселей и внутренним содержимым, каждое из которых содержится в div.

HTML

<div id="container">

    <div id="panel">
        <div>Content 1</div>
        <div>Content 2</div>
    </div>

</div>

CSS

#panel div {
    width: 300px;
    border: 1px solid black;
    float: left;
    height: 350px;
}

#panel {
   width: 5000px;
}

#container {
    overflow: hidden;
    width: 302px;
}

jQuery

$(document).ready(function() {

    $('#panel').delay(2500).animate({
        marginLeft: '-=302px'
    }, 500);

});

Мы сдвигаем левое поле панели к отрицательному значению, поэтому она перемещает всю панель влево на величину ширины содержимого, которое нужно сдвинуть для просмотра (в данном случае 302 пикселя)..

Доступна скрипка: http://jsfiddle.net/cMKbA/2/

Answer 2

Я большой поклонник расположенного здесь слайдера Nivo http://nivo.dev7studios.com.