javascript – jquery animate：两个div,一个移出屏幕,另一个移入

编辑确定..我想做一个通用的解决方案(通过动画包装边距).更清晰的代码和更多可定制的=> 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;
}

JS：

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;
}

JS：

$('#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});
});