Question

我正在构建一个内容滑块时出现问题。放置在相对定位的包装物内部的标签内有4盒内容物。从左到右，框分别具有ID＃module1，＃module2，＃module3和＃module4。当我单击一个按钮时，我希望内容向右滚动。

＃module4应该动画离开页面的右侧，隐藏，然后动画回到页面左侧的视图。
＃module3应该放在＃module4所在的位置，并且不透明度设置为与＃module4相同的50％。
#module2应该进入#module3所在的地方。
＃module1应将不透明度设置为100％并移至＃module2所在的位置。

我遇到的问题是#module4向右滚动到页面右侧，然后当它移动到页面左侧时可见。我似乎无法弄清楚如何从视图中正确隐藏它，直到它滚动到左侧的视图中。

这是我的动画代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

试试这个：

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

Answer 3

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

jQuery动画内容滑块循环

3 个答案: