jQueryでプロセスウィザードをアニメーション化する方法は？

Question

私はシンプルなウィザードスクリプトjQueryを使いましたが、データの処理を続けながら、プロセスの効果を追加したいと思います。

例この画像：

にはどうすればいいように、プロセスのプロセスstep-1アニメーションitem1を続けるとしてショッピングカート 画像のプロセスをアニメーション化することができますか？

$(".button.next").click(function() { 
    //store parent 
    var step = $(this).parents(".step"); 
    if (step.next().length) { 
    step.fadeOut("slow", function() { 
     step.next().fadeIn("slow"); 
    }); 
    } 
    return false; 
}); 
$(".button.prev").click(function() { 
    var step = $(this).parents(".step"); 
    if (step.prev().length) { 
    step.fadeOut("slow", function() { 
     step.prev().fadeIn("slow"); 
    }); 
    } 
    return false; 
}); 

完全なコード：https://jsfiddle.net/Lkwanexe/1/

Tony Samperi

Answer 1

の助けのおかげで、これはjQueryのanimateを使用していることを行うにはどのような考え方です。

1）あなたがステップ間のステップ幅を知っている必要があるので、私は自分のマップの一歩を踏み出す|

幅

var lineStepWidth = { 
    1: 120, 
    2: 300, 
    3: 450 
}; 

また、行うことができますステップ

<div class="step step-1" data-step="1"> 

を定義するためにHTML5のatributeデータを追加します。いくつかのCSSクラスがあります。

2）

$.fn.animateLine = function(step) { 
    var lineWidth = lineStepWidth[step]; // get step width from attribute and map 
    $('#line').animate({ 
     width: lineWidth 
    }, 1000); 
}; 

3をアニメーション行います自身単に機能を作る）は、あなたの行動、それザッツ

$.fn.animateLine(step.prev().data('step')); // step.next/step.prev 

に独自のアニメーション機能を追加します。

JSFIDDLE

これはあなたの問題についてのあなたの次の思考のための私の考えです。