jQuery 动画内容滑块循环答案

【问题标题】：jQuery animation content slider loopjQuery 动画内容滑块循环
【发布时间】：2014-11-04 20:22:47
【问题描述】：

我在构建内容滑块时遇到了一些问题。有 4 盒内容放置在绝对定位在相对定位的包装器内的标签内。从左到右，这些框的 ID 分别为 #module1、#module2、#module3 和 #module4。当我单击一个按钮时，我希望内容向右滚动。

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

【问题讨论】：

使用 onmouseover 代替 onMouseUp 在 DOM EVENTS 中没有默认的 onMouseUp 事件

标签： javascript jquery animation

【解决方案1】：

这段代码为我修复了它。谢谢你们的帮助！

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

【讨论】：

【解决方案2】：

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

【讨论】：

感谢您的解释，似乎在我当前的代码中，css 只是被忽略了，所以我认为您的解释是正确的。当我尝试您提供的代码时， mod[3] 就消失了。我认为你让我离解决这个问题更近了一点。
是的，我没有尝试验证 css/动画，只是为了提供一种对它们进行排序的模式。您可能只需要使用这些百分比值。
另一种（更好的？）方法是深度克隆 mod[4]，调整克隆的“左”以将其定位到 mod[0] 的左侧并附加到包装器... . 然后为所有四个 div 设置动画以向右滑动。最后整理一下，删除克隆的现已失效的原始 div 并保持 mod 为最新。

【解决方案3】：

试试这个：

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

【讨论】：

这很接近，但是 div 在滑动时没有动画，它们只是消失然后重新出现。
糟糕！我想我不明白原来的问题。很高兴它成功了