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（因爲它已設置）。讓我編輯代碼以稍後識別瀏覽器&設置超時。