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

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 

---

- OLD -

你可以像这样的东西开始：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}); 
}); 

Answer 2

我曾用jQuery计时器试过这种插件&与localhost一起工作得非常好。

您需要导入：jQuery & jQuery Timer Plugin

然后就是实现这个：

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

享受&纠正我，如果我错了。

编辑：看来问题仍然在不同的浏览器！ Fire Fox的Chrome & 10000的超时时间应该是4000（因为它已设置）。让我编辑代码以稍后识别浏览器&设置超时。