Question

I’m having trouble doing scrolling…What I want to do is after clicking a button making a div scroll left and another scroll right/ one goes out, second in. But I can’t find any solution and I’am having trouble forcing the second div to go next to the first one and hiding it…Any ideas?

Website

Answer 1

I have read your question and this is what i have understood;

You are trying to animate a div with another div, and here is the solution:

View the fiddle for a working example: http://jsfiddle.net/HNY7R/

HTML

<div id="container">
    <div class="main"></div>
    <div class="second"></div>
</div>

<input type="button" id="push" value="push me" />

CSS

#container
{ width: 400px; height: 200px; position: relative; border:1px solid black; overflow: hidden; }

.main
{ width: 400px; height: 200px; position: absolute; left: 0; top: 0; background: green; }

.second
{ width: 400px; height: 200px; position: absolute; left: 400px; top: 0; background: red; }

jQuery

$('#push').click(function(){

        var main = $('.main').css('left');
        var second = $('.second').css('left');

        if(main == '-400px'){
            $('.second').animate({ 'left' : '400px' }, 500);
            $('.main').animate({ 'left' : '0px' }, 500);
        } else {
            $('.second').animate({ 'left' : '0px' }, 500);
            $('.main').animate({ 'left' : '-400px' }, 500);
        }


    });