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

elcex8rz 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(138)

**我是jQuery的初学者。我正在用jQuery创建一个LEGO指令。我想做的是，我想做“下一步”和“后退”按钮，当我点击“下一步”时，Piece 1从顶部下来。然后，如果我再次单击“下一步”按钮，Piece 2将下降。但是，如果我点击'返回'按钮后，Piece 1下来，它应该再次显示Piece 1.

所以如果我连续点击“下一步”，屏幕上会显示Piece 1-> piece 2-> piece 3-> piece 4。如果我点击“下一步”两次，然后点击“后退一次，piece 1-> piece 2-> piece 1...这就是我所做的，它正在工作，但它不包括“返回”功能。
我怎样才能添加“返回”功能，使用户可以来回？任何帮助将不胜感激。谢谢这是链接

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

jquery

来源：https://stackoverflow.com/questions/43420451/jquery-if-else-if-next-back-buttons-element-animations

2条答案

按热度按时间

pxq42qpu1#

你可以创建一个数组，并使用Next/Back按钮来引用该数组：请注意，我不能复制您的图像/动画-所以我dodgied了一个列表，得到的元素附加到它-然后点击按钮添加正确的元素的基础上计数器值。
注意你可以做一个时髦的效果，删除元素的背部点击-所以点击“下一个”将动画元素下降到图像-点击“背部”可以动画最后设置的元素关闭字符和屏幕外。

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

赞(0）回复(0）举报 2023-06-22

mzillmmw2#

尝试如下代码来反转动画

// 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/
我想这应该对你有帮助。

赞(0）回复(0）举报 2023-06-22

我来回答

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

go to see what I did here

2条答案

相关问题

热门标签

最新问答