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

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

http://jsfiddle.net/steweb/rWbFw/

标记：

hey there I'm the first div

hey there I'm the second div

hey there I'm the third 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

– 老 –

标记：

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

});