jQuery動畫內容滑塊循環

我在構建內容滑塊時遇到了一些問題。有4盒內容放置在絕對位於相對定位的包裝內的標籤內。從左到右，這些框分別具有ID＃module1，＃module2，＃module3和＃module4。當我點擊一個按鈕時，我希望內容向右滾動。jQuery動畫內容滑塊循環

＃module4應該在頁面的右側進行動畫播放，隱藏，然後在頁面的左側進行動畫回放。
＃module3應該放置在＃module4的位置，並將不透明度設置爲與＃module4相同的50％。
＃module2應該移動到＃module3所在的位置。
＃module1應該將不透明度設置爲100％並移動到＃module2所在的位置。

我遇到的問題是當＃module4滾動到頁面右側，然後在它移到頁面左側時可見。我似乎無法弄清楚如何正確隱藏視圖，直到它滾動到左側的視圖中。

這裏是我的動畫代碼：

#module1,#module2,#module3,#module4{position:absolute;top:0;width:31.9444%;height:200px;background:#999;} 
 
.wrapper{width:100%;height:220px;position:relative;} 
 
button{position:relative;z-index:1000;}

<body onLoad="contSlidr()"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
<div class="wrapper"> 
 
    <div id="module1">Module1</div> 
 
    <div id="module2">Module2</div> 
 
    <div id="module3">Module3</div> 
 
    <div id="module4">Module4</div> 
 
</div> 
 

 
<script type="text/javascript"> 
 
     ////////////////////////////////// 
 
     //  V a r i a b l e s  //   
 
     ////////////////////////////////// 
 
     var t = 400; 
 
     var mod = [$('#module1'),$('#module2'),$('#module3'),$('#module4')]; 
 
     var m2 = mod[1].width(); 
 
     var scrnW = $(document).width(); 
 
     ////////////////////////////////// 
 
     function contSlidr(){ 
 
     $(document).ready(function(){ 
 
      mod[0].css('left','-23%'); 
 
      mod[0].css('opacity','.5'); 
 
      mod[1].css('left',scrnW*0.14583); 
 
      var m2PosL = scrnW*0.14583; 
 
      mod[2].css('left',m2 + m2PosL + (scrnW*.041667)); 
 
      mod[3].css('left','88.75%'); 
 
      mod[3].css('opacity','.5'); 
 
     }); 
 
     } 
 
     ////////////////////////////////// 
 
     function animateRight(){ 
 
     var m2PosL = scrnW*0.14583; 
 
     mod[0].animate({ 
 
      left:scrnW*0.14583, 
 
      opacity: 1 
 
     },t); 
 
     mod[1].animate({ 
 
      left: parseInt(m2 + m2PosL + (scrnW*.041667)) 
 
     },t); 
 
     mod[2].animate({ 
 
      left:"88.75%", 
 
      opacity:.5 
 
     },t); 
 
     mod[3].animate({ 
 
      left:"120%", 
 
     },{duration:t/2}); 
 
     mod[3].css('left','-120%'); 
 
     mod[3].animate({ 
 
      left: "-23%", 
 
     },{duartion:t}); 
 
     var b = mod.pop(); 
 
     mod.unshift(b); 
 
     } 
 
     ////////////////////////////////// 
 
    </script> 
 

 
<button onMouseUp="contSlidr()">Set Left</button> 
 
<button onMouseUp="animateRight()">Move Right</button> 
 
</body>

來源

2014-11-04 solid90

使用'onmouseover'代替onMouseUp的存在DOM事件沒有默認onMouseUp事件 – 2014-11-04 20:24:44

而.animate()使得在FX的動畫隊列的條目.css沒有 - 它的作用是直接的。

因此，序列mod[3].animate(...); mod[3].css(...); mod[3].animate(...)將不會按照您的意願行事。

你想第一個這些動畫的應用.css()並啓動第二動畫之前完成：

mod[3].animate({left:"120%"}, t/2).promise(function() { 
    mod[3].css('left','-120%').animate({left: "-23%"}, t); 
});

來源

2014-11-04 20:59:27

感謝您的解釋，似乎在我目前的代碼中，css被忽略了，所以我認爲你對你的解釋有所瞭解。當我嘗試你提供的mod [3]代碼就會消失。我想你讓我更接近解決這個問題。 – solid90 2014-11-04 22:35:59

是的，我沒有試圖驗證CSS /動畫，只是爲了提供一個模式，將它們排序。你可能只需要玩弄這些百分比值。 – 2014-11-04 23:28:24

另一個（更好的方法）是深度克隆mod [4]，調整克隆的左邊以將其放置在mod [0]的左邊並附加到包裝器....然後將所有四個div動畫爲向右滑動。最後整理一下，刪除已克隆的現在不存在的原始div，並保持'mod'最新。 – 2014-11-04 23:40:26

試試這個：

function animateRight(){ 
    var m2PosL = scrnW*0.14583; 
    mod[0].animate({ 
     left:scrnW*0.14583, 
     opacity: 1 
    },t); 
    mod[1].animate({ 
     left: parseInt(m2 + m2PosL + (scrnW*.041667)) 
    },t); 
    mod[2].animate({ 
     left:"88.75%", 
     opacity:.5 
    },t); 
    mod[3].animate({ 
     left:"120%", 
    },{duration:t/2}); 
    mod[3].css('left','-120%'); 
    mod[3].css('opacity', '0'); 
    mod[3].animate({ 
     left: "-23%" 
    },{ 
     duartion:t, 
     complete: function() { 
      $(this).css('opacity', '0.5'); 
     } 
    }); 

    var b = mod.pop(); 
    mod.unshift(b); 
    }

來源

2014-11-04 20:46:09

這是接近，但，當滑動時，他們只是消失然後重新出現在div的不夠生動。 – solid90 2014-11-04 22:39:15

糟糕！我想我不明白原來的問題。很高興它解決了 – 2014-11-06 19:38:42

此代碼固定對我來說。謝謝你們的幫助！

function animateRight(){ 
    var m2PosL = scrnW*0.14583; 
    if(c > 5){ 
    c = 1 
    } 
    mod[4] = mod[3].clone().attr('id','mod'+c); 
    mod[4].appendTo('.opinionCon'); 
    mod[4].css('left','-120%'); 
    mod[0].animate({ 
     left:scrnW*0.14583, 
     opacity: 1 
    },t); 
    mod[1].animate({ 
     left: parseInt(m2 + m2PosL + (scrnW*.041667)) 
    },t); 
    mod[2].animate({ 
     left:"88.75%", 
     opacity:.5 
    },t); 
    mod[3].animate({ 
     left:"120%", 
    },{duration:t/2}).promise().done(function(){ 
     mod[4].remove(); 
    }); 
    mod[4].animate({ 
     left: "-23%", 
    },{duartion:t}); 
    var b = mod.pop(); 
    mod.unshift(b); 
    ++c; 
    }

來源

2014-11-05 02:40:29 solid90

jQuery動畫內容滑塊循環

回答

相關問題