jQueryは割合に応じて画像の一部をフェードアウトしますか？

Question

バーではなく画像で「プログレスバー」を作る最良の方法は何ですか？

画像の不透明度をパーセンテージ変数で制御したいと考えています。つまり、％= 33％の場合、画像の下部33％は正常ですが、上部66％はわずかに退色します。

ありがとうございました！

Rは

Answer 1

私は2枚の画像でこれを行うだろうと互いに上下に（それは同じ画像が二回ロードすることができます）。

http://jsfiddle.net/MPFyt/

これはまさに権利はありませんが、出発点としてそれを使用することができます。

Answer 2

2つの画像を使用することをお勧めします。両方とも同じ位置に正確に、背景と前景を置き、パーセンテージに従って前景クリップを作成します。

Answer 3

イメージの不透明度を動的に変更するには、CSSをJavaScriptで変更します。

var opacityvalue;//the opacity [a range from 0 (for invisible) to 1 (for visible)] 
$('#image').style.opacity=opacityvalue; 
$('#image').filters.alpha.opacity=opacityvalue*100; 

私は正直言って、私はそれをテストしていないので、いくつかのバグがありますが、そのコンセプトはそこにあります。

CSSリファレンス：jQueryの/ワットhttp://www.w3schools.com/css/css_image_transparency.asp

変更CSS：http://www.jquery4u.com/dynamic-css-2/change-css-jquery/

Answer 4

ここではそれを行うための簡単な方法です：

http://jsfiddle.net/DQ4Fh/13/

基本的にはちょうど同じ背景画像を持つ2つのdivを積み重ねます（1つは上に、もう1つは下にあります）、不透明にするのを少なくし、2つの画像の高さを変えて、どれだけ露出させるかを制御します。

プロダクションでは、setProgress関数でjqueryのanimateメソッドを使用してスムーズに更新する必要があります。私が不透明度を設定するために使用したCSSはクロスブラウザーではありません。それを更新するか、jqueryを使用して淡色表示divの不透明度を設定する必要があります。