jquery animate: два элемента div, один перемещается за пределы экрана, другой перемещается внутрь

Question

Я хочу реализовать анимацию, в изображении есть два div

D1 | D2

Сначала D2 находится на экране (с шириной 100%), D1 невидим (за пределами экрана). Я хочу анимацию, которая, D2 перемещается вправо, за пределы экрана. D1 перемещается слева направо, наконец занимает экран (замените D1).

Если вы видели, как Groupon анимирует при регистрации пользователя, вы можете понять, что я имею в виду ...

Спасибо.

Answer 1

РЕДАКТИРОВАТЬ ОК. Я хотел бы сделать общее решение (путем анимации поля оболочки). Более понятный код и более настраиваемый => http://jsfiddle.net/steweb/rWbFw/

Разметка:

<div id="mask">
    <div id="wrapper">
        <div class="full" id="div1">hey there I'm the first div</div>
        <div class="full" id="div2">hey there I'm the second div</div>
        <div class="full" id="div3">hey there I'm the third div</div>
        <!-- add as many 'full' divs as you want -->
    </div>
</div>

CSS:

#mask{
    width:100%;
    overflow:hidden;
    position:relative;
}
#wrapper{
    width:100%;
    height:300px;  /* optional! */
}
.full{
    float:left;
    height:300px;  /* optional! */
}
#div1{
    background:green;
}
#div2{
    background:white;
}
#div3{
    background:red;
}

ЯШ:

var utils = {
    maskWidth : $('#mask').width(),
    currIndex : 0,
    setWidths : function(){
        //setting maskWidth
        utils.maskWidth = $('#mask').width();

        //setting wrapper width 
        $('#wrapper').css('width',$('.full').length * utils.maskWidth);

        //setting 'full div' width
        $('.full').each(function(index){
            $(this).css('width',utils.maskWidth);
        });

        //setting curr wrapper margin (for window resize)
        $('#wrapper').css('margin-left',-(utils.currIndex*utils.maskWidth));

    }
}

$('.full').click(function(){
    utils.currIndex = $(this).index()+1; //current elem index (for margin calc)
    if($(this).next().size() == 0){//if is the last, reset
        utils.currIndex = 0;
        $('#wrapper').animate({'margin-left':0});
    }else{ //animation, negative margin of the wrapper
        $('#wrapper').animate({'margin-left':-(utils.currIndex*utils.maskWidth)});
    }
});

$(window).resize(function() { //on resize, reset widths and margins
    utils.setWidths();
});

utils.setWidths(); //first time, set everything

---

- СТАРЫЙ -

Вы могли бы начать с чего-то вроде этого: http://jsfiddle.net/steweb/dsHyf/

разметка:

<div id="wrapper">
    <div class="full" id="div1"></div>
    <div class="full" id="div2"></div>
</div>

CSS:

#wrapper{
    width:100%;
    overflow:hidden;
    position:relative;
    height:300px;
}
.full{
    position:absolute;
    width:100%;
    height:300px;
}
#div1{
    background:#FF0000;
    left:0px;
}
#div2{
    display:none;
    background:#FFFF00;
}

ЯШ:

$('#div2').css('left',-$('#wrapper').width()).show();

$('#div1').click(function(){
    $(this).animate({'left':$('#wrapper').width()});
    $('#div2').animate({'left':0});
});

$('#div2').click(function(){
    $(this).animate({'left':-$('#wrapper').width()});
    $('#div1').animate({'left':0});
});

Answer 2

Я пробовал это с плагином таймера jQuery и он очень хорошо работает с localhost.

Вам необходимо импортировать: jQuery & Плагин таймера jQuery

А затем просто реализуйте это:

<script type="text/javascript" src="jquery-1.5.js"></script>
        <script type="text/javascript" src="jquery.timers-1.2.js"></script>
        <script type="text/javascript">
            var i=0,j=100;
            $('#1').css('width',"0%");
            $('#2').css('width',"100%");
            l2r();
            function l2r(){
                var i=0,j=100;
                $(document).everyTime(2, function() {
                    i+=0.10;
                    $('#1').css('width',i+"%");
                    j -= 0.10;
                    $('#2').css('width',j+"%");
                }, 1000);
                setTimeout("r2l()", 4000);
            }
            function r2l(){
                var i=100,j=0;

                $(document).everyTime(2, function() {
                    i-=0.10;
                    $('#1').css('width',i+"%");
                    j += 0.10;
                    $('#2').css('width',j+"%");
                }, 1000);
                setTimeout("l2r()", 4000);
            }

И ваш HTML будет:

        <div style='width:100%;'>
            <div id='1' style='background-color:#333333; height: 100px; float: left;'></div>
            <div id='2' style='background-color:#CCCCCC; height: 100px; float: right;'></div>
        </div>

Наслаждайтесь и поправьте меня, если я ошибаюсь.

РЕДАКТИРОВАТЬ: Кажется, проблема все еще с другим браузером!Время ожидания должно быть 4000 (как установлено) для Chrome и 10000 для Fire Fox.Позвольте мне отредактировать код для распознавания браузера и установить время ожидания позже, очень скоро.