另一個jquery動畫返回問題

我是js新手，對jquery沒有足夠的瞭解能夠將其他人的解決方案操縱到我自己的代碼中，所以我想我會問我自己得到一個具體答案。另一個jquery動畫返回問題

我正在開發一款交互式車庫應用程序，您可以在其中更改汽車和車輪的顏色。我有獨立的顏色選擇器，可以在汽車和車輪的舞臺上（從底部開始）製作動畫，但都處於相同的位置。

基本上，當用戶點擊「改變車輛顏色」時，它將汽車顏色選擇器設置到位，當他們點擊「改變車輪顏色」時，它隱藏車輛顏色選擇器並且動畫化車輪顏色選擇器。這就是說，我想要將選擇器返回到它們原來的位置，當另一個被點擊時，這樣它們不會在屏幕上滑動，並且用戶可以多次在兩個顏色選擇器選項之間切換如他們想要的。

這裏是我的工作代碼，任何幫助將是巨大的：

$("#carcolor").click(function(){ 

    $("#colors2").hide(); 
    $("#colors1").show(); 
    $("#pink").animate({ 
     bottom:'+=200px'},1500);  
    $("#yellow").animate({ 
     bottom:'+=200px'},2000); 
    $("#green").animate({ 
     bottom:'+=200px'},2500); 
    $("#blue").animate({ 
     bottom:'+=200px'},3000);  
    $("#purple").animate({ 
     bottom:'+=200px'},3500); 
    $("#red").animate({ 
     bottom:'+=200px'},4000); 


$("#wheelcolor").click(function(){ 

    $("#colors1").hide(); 
    $("#colors2").show(); 
    $("#pink2").animate({ 
     bottom:'+=200px'},1500);  
    $("#yellow2").animate({ 
     bottom:'+=200px'},2000); 
    $("#green2").animate({ 
     bottom:'+=200px'},2500); 
    $("#blue2").animate({ 
     bottom:'+=200px'},3000);  
    $("#purple2").animate({ 
     bottom:'+=200px'},3500); 
    $("#red2").animate({ 
     bottom:'+=200px'},4000);

來源

2013-10-26 Dsighn

你也可以發佈html，或創建一個小提琴，所以我們可以看到發生了什麼？ – FiLeVeR10

留下評論太長，我從來沒有用過小提琴。不好意思。你究竟需要知道什麼？我基本上只需要具備復位到原來的位置的div的位置，如果該指標是點擊第二次，或者如果其他指標被點擊。發生的事情是，如果「改變汽車顏色」按鈕，點擊一次的div從當前位置再次動畫起來（動起來的畫面） – Dsighn

您可以編輯您的問題，並添加代碼，但我想我知道你的意思。我會看看我能做什麼。 – FiLeVeR10

是如此接近？

我不確定你的標記看起來如何，所以我只是把它放在一起我想要的方式，並試圖簡化一些東西。

編輯雖然我的例子並不完美匹配，但它確實說明了一個更好的方法來完成任務，所以我將它留在這裏。

$('.box').each(function() { 
    var box = $(this); 
    var that = $(this).children('.colors'); 
    var head = $(this).children('h2'); 
    var speed = 200; 
    head.on('click', function(){ 
     if(that.hasClass('on')) { 
      that.slideUp(speed).children().stop().animate({bottom: '-30px'}, speed).end().removeClass('on'); 
     } else { 
      $('.on').removeClass('on').slideUp(speed).children().attr('style',''); 
      that.slideDown(speed).addClass('on').children().each(function(i) { 
       $(this).stop().animate({bottom: '+=30px'}, speed*i); 
      }); 
     } 
    }); 
});

做出了小提琴：http://jsfiddle.net/filever10/DGUeU/

編輯

爲了這個工作應該，你應該重做整個事情的方式。你的html是各種各樣的，CSS不是幫助javascript，而javascript是冗長的方式。

我想我在這裏工作，讓我知道。 http://jsfiddle.net/filever10/y47wn/8/

來源

2013-10-27 00:56:27 FiLeVeR10

不完全，但我需要的是在那裏的某個地方哈哈。讓我註冊一個小提琴，然後用適當的背景回覆你。再次感謝 – Dsighn

是的，我聽到你，我討厭浪費人們的時間，所以爲此我表示歉意。我扔了一把小提琴，但我用切片而不是css作爲元素，所以小提琴只是破碎的圖像，但你可以從中得到它的想法。基本上，你點擊中間的img，當其餘的動畫在它的最右邊的兩個控制顏色選擇器，你會看到從底部動畫了 http://jsfiddle.net/dsighn/ y47wn/ – Dsighn

現在，我在底部最右邊有一個額外的動畫，或者「輪子顏色」img，這樣當它被點擊時，它會將「汽車顏色」選擇器背景化，但它是一個bandaid並且不起作用其他方式，因爲用戶可能會選擇先改變車輪顏色......如果這是有道理的 – Dsighn

另一個jquery動畫返回問題

回答

相關問題