jQuery。アニメーション化する。アレイ。変数。セレクタ。次/前のボタン

Question

私はlego命令のアニメーションを作成しようとしています。

私は変数を宣言しました。これはオプションであり、countであるため、順番にアニメーション化するために選択する必要があります（しかし、セレクタとして変数を呼び出す方法はわかりません）。 'バック。'

また、最初のページに移動するには、「リセット」ボタンを設定する必要があります。

ご協力いただければ幸いです。ありがとうございました。ここで

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

でアニメーションをリセットするには、次のコードを試してみてくださいjQueryの

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/

私はそれがあなたに役立つはずだと思います。