javascript - 查询。动画。大批。变量。选择器。下一个/上一个按钮

Question

我正在尝试为乐高教学制作动画。

我声明了变量，它们是选项和计数，所以我需要选择它以按顺序设置动画。(但我不知道如何将变量称为选择器。)当我单击“下一步”和“下一步”这两个按钮时回来。”

我还需要设置“重置”按钮以转到第一页。

任何帮助将不胜感激。谢谢。

This is the rough image of how it looks.

$(document).ready(function() {
    var options = ['legs', 'body1', 'cape1', 'cape2', 'head1', 'helmet1']
    var count = 0;

    $('.back').click(function() {

        if (count > 0) { count--; } ** $('') ** .eq(count).animate({ top: '250px' });
    })

    $('.next').click(function() {

        $('').eq(count).animate({ top: '250px' }, 'slow');
        count++;
    })

    $('.reset').click(function() {
        count = 0;
        $('').html('');

    })

});

Answer 1

在您的情况下尝试使用以下代码重置动画

// Reset animation
reset.click(function(){
    for (i = cnt; i >= 1; i--) {
      e = $('.components').find('img')[i];
      $("#" + e.id).stop().animate({ top: top }, {
        complete: function() { $(this).removeAttr('style') }
      });
      $("#" + e.id).removeAttr("style");
    }
    init();
});

查询

var e;
var top;
var cnt = 0;
var next = $('.next'); 
var back = $('.back');
var reset = $('.reset');
function init(){
  cnt = 0;
  back.addClass( "disable" );
  next.removeClass( "disable" );
  reset.addClass( "disable" );
}
var eleCnt = $('.components').find('img').length;
init();
$(document).ready(function(){
  reset.click(function(){
    for (i = cnt; i >= 1; i--) {
      e = $('.components').find('img')[i];
      $("#" + e.id).stop().animate({ top: top }, {
        complete: function() { $(this).removeAttr('style') }
      });
      $("#" + e.id).removeAttr("style");
    }
    init();
  });
  next.click(function(){
    back.removeClass( "disable" );
    reset.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" );
        reset.addClass( "disable" );
      } else {
        next.removeClass( "disable" );
        back.removeClass( "disable" );
      }
      e = $('.components').find('img')[cnt];
    }
    if(e){
      $("#" + e.id).stop().animate({ top: top }, {
        complete: function() { $(this).removeAttr('style') }
      });
      $("#" + e.id).removeAttr("style"); 
      if(cnt > 0){cnt -= 1;}
    }
  });
});

这是工作代码:https://jsfiddle.net/5zhb60m3/4/

我觉得应该对你有帮助。