Question

伙计们，我是jQuery的初学者。我正在用jQuery创建一个LEGO指令。我想做的是，我想制作'下一个'和'后退'按钮，而当我点击“下一步” Piece1从顶部下来。然后，如果我再次单击“下一步”按钮，则Piece2将会关闭。但是，如果我在Piece1关闭后单击“后退”按钮，它应该再次显示Piece1 所以如果我连续点击“下一步”，屏幕会显示 Piece1 - ＆gt; piece2 - ＆gt;第3部分 - ＆gt; piece4 .. 如果我点击“下一步”两次并点击“返回一次”， piece1 - ＆gt; piece2 - ＆gt; piece1 ...... 这就是我所做的，它正在发挥作用，但它不包括'后退'功能。

我如何添加'后退'功能，以便用户可以来回走动？任何帮助，将不胜感激。谢谢。这是链接

go to see what I did here

$(document).ready(function(){
    $('.next').click(function(){
        $('#legs').animate({top: '250px'});
        $('.next').click(function(){
            $('#body1').animate({top: '248px'});
            $('.next').click(function(){
               $('#cape1, #cape2').animate({top: '248px'}); 
               $('.next').click(function(){
                   $('#head1').animate({top: '248px'});
                   $('.next').click(function(){
                       $('#helmet1').animate({top: '248px'});
                   });
               });
            });
        });
    });
});

Answer 1

您可以创建一个片段数组并使用下一个/后退按钮来引用该数组：请注意，我无法复制您的图像/动画 - 所以我想了一个列表，它会将元素附加到它上面 - 然后单击按钮会根据计数器值添加正确的元素。

请注意，您可以通过删除后退单击中的元素来实现一种时髦的效果 - 因此单击“下一步”会将元素缩小到图像 - 单击“返回”可以将最后一个元素设置为角色的动画，然后向上移动屏幕。

$(document).ready(function(){
var options = ['legs','body1','cape1','cape2','head1','helmet1']
var count=0;

  $('#prev').click(function(){
      if(count > 0){count--;}
      updateList(count);
  })

  $('#next').click(function(){
     count++;
     updateList(count);
  })
  
    $('#reset').click(function(){
     count=0;
     $('#sampleList').html('');
     updateList(count);
  })
  
  function updateList(count){
    $('#sampleList').append('<li>' + options[count]+ '</li>')
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click the buttons to add to the list</p>
<button id="prev" type="button">Previous</button>
<button id="next" type="button">Next</button>
<button id="reset" type="button">Reset</button>
<hr/>

<ul id="sampleList">
  <li>legs</li>
</ul>

Answer 2

尝试以下代码来反转动画

// Reverse animation
$("#" + e.id).stop().animate({ top: top }, {
  complete: function() { $(this).removeAttr('style') }
});
$("#" + e.id).removeAttr("style");

jquery的

var e;
var top;
var cnt = 0;
var next = $('.next'); 
var back = $('.back');
back.addClass( "disable" );
var eleCnt = $('.components').find('img').length;
$(document).ready(function(){
  next.click(function(){
    back.removeClass( "disable" );
    if(eleCnt > cnt){
      cnt += 1; 
      if(cnt==eleCnt-1){
        next.addClass( "disable" );
      }
      e = $('.components').find('img')[cnt];
      if(e){
        top=$("#" + e.id).css('top');
        $("#" + e.id).animate({top: '248px'});
      } else {
        cnt -= 1; 
      }
    }
  });

  back.click(function(){
    if(cnt > 0){
      if(cnt == 1){
        back.addClass( "disable" );
      } else {
        next.removeClass( "disable" );
        back.removeClass( "disable" );
      }
      e = $('.components').find('img')[cnt];
    }
    if(e){
      // Reverse animation
      $("#" + e.id).stop().animate({ top: top }, {
        complete: function() { $(this).removeAttr('style') }
      });
      $("#" + e.id).removeAttr("style"); 
      if(cnt > 0){cnt -= 1;}
    }
  });
});

以下是工作代码：https://jsfiddle.net/5zhb60m3/3/

我认为应该对你有帮助，

jQuery if / else if，next / back按钮。元素动画

go to see what I did here

2 个答案: