jQuery。動畫。陣列。變量。選擇。下一個/上一個按鈕

Question

我正在嘗試爲樂高指令創建一個動畫。當我點擊兩個按鈕'next'時，我需要選擇它作爲動畫順序（但我不知道如何將變量作爲選擇器調用）。 '背部。'

我還需要設置「重置」按鈕才能進入第一頁。

任何幫助將不勝感激。謝謝。

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/

我認爲它應該可以幫助你。