我想实现一个动画,图片有两个div
D1 | D2
起初 D2 在屏幕中(宽度为 100%),D1 是不可见的(在屏幕之外)。 我想要一个动画,D2 向右移到屏幕外。 D1从左向右移动,最终占据屏幕(取代D1)。
如果您看过 Groupon 在注册用户时的动画效果,您可能会明白我的意思...
谢谢。
最佳答案
编辑 好的..我想做一个通用的解决方案(通过动画包装边距)。更清晰的代码和更可定制的 => 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});
});
关于javascript - jquery animate : two divs, 一个移出屏幕,另一个移入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5028463/