高さのシミュレーション：animate（）使用時の自動

メニューやフォトギャラリーなど、サイト上のさまざまなアニメーションオブジェクトを使用するタスクは、長い間珍しいものでした。 そして、ここで素晴らしいjqueryメソッドanimate（）が開発者の助けになります。 このメソッドを使用すると、さまざまなcssプロパティをアニメーション化できますが、かなり大きな欠点が1つあります。プロパティ値として使用できるのは、hide、show、toggleの数値または値のみです。 たとえば、height：20はtrueですが、height：autoは常に機能するとは限りません。

特定の例を使ってこの問題を解決してみましょう。

垂直の2レベルメニューを開発する必要があるとしましょう。 デフォルトでは、最初のレベルのポイントのみが開いており、対応するリンクをクリックすると、開いているサブレベルが最初に非表示になり、次に目的の非表示のサブレベルが開きます。 しかし、開いているだけでなく、コンテナの高さと透明度を上げてアニメーション化します。

つまり、最終的にこのメニューを取得する必要があります。



将来のメニュー用にHTMLコードを作成しています。

<a id= "1" class= "menu" > 1 </a><br/>
<div id= "magic1" class= "magic" > 2 </div>
<a id= "2" class= "menu" > 1 </a><br/>
<div id= "magic2" class= "magic" > 2<br/> 2<br/> 2 </div>
<a id= "3" class= "menu" > 1 </a><br/>
<div id= "magic3" class= "magic" > 2 </div>


Css：

div.magic{
filter : alpha(opacity=0) ;
-moz-opacity : 0 ;
-khtml-opacity : 0 ;
opacity : 0 ;
overflow : hidden ;
padding-left : 10px ;
}


そして、javascript：

$(document).ready(function(){
$( "a.menu" ).click(
function(){
$( "div.magic" ).animate({
opacity: 0,
height: "10px"
}, 500);

$( "div#magic" + this .id).animate({
opacity: 1,
height: "auto"
}, 500);
}
);
})


メニュー項目をクリックすると、「マジック」クラスのすべてのブロックが非表示になり、必要な項目を含むブロックが開きます。

すべてが機能するように思えますが、まったくそうではありません。 Firefox、Google Chrome、およびOperaは、「auto」高さプロパティの値の代わりに、cssで登録したコンテナの高さを10pxに設定し、IE7はエラーを生成します：無効な引数

これに対処する方法は？

方法1

アイデアは、メニューを操作する前に、まず必要なすべてのコンテナの高さを配列に書き留めてから、「auto」の代わりにこの配列の要素の値を置き換えることです。 つまり、新しいjavascriptコードは次のようになります。

$(document).ready(function(){
var height_element= new Array();
var array_length=$( "div.magic" ).length;

for (i=1;i<=array_length;i++)
{
height_element[i]=$( "div#magic" +i).height();
}

$( "a.menu" ).click(
function(){
$( "div.magic" ).animate({
opacity: 0,
height: "10px"
}, 500);

$( "div#magic" + this .id).animate({
opacity: 1,
height: height_element[ this .id]+ 'px'
}, 500);
}
);
})


したがって、「auto」に等しい設定された高さの値の使用を取り除き、特定の数値に置き換えます。 これはIEのエラーを取り除くのに役立ちますが、判明したように、すべてのブラウザーが新しい値として10pxを設定し続けるため、コンテナーの高さの真の値に関する問題は解決しません。 つまり、画面に次のように表示されます。



この問題に対処するために、マジッククラスのプロパティから高さの値を削除し、真の高さの値を配列に書き込んだ後に動的に設定します。

新しいcssファイルは次のようになります。

div.magic{
filter : alpha(opacity=0) ;
-moz-opacity : 0 ;
-khtml-opacity : 0 ;
opacity : 0 ;
padding-left : 10px ;
overflow : hidden ;
}


そして、このようなjavascript：

$(document).ready(function(){
var height_element= new Array();
var array_length=$( "div.magic" ).length;

for (i=1;i<=array_length;i++)
{
height_element[i]=$( "div#magic" +i).height();
}

$( "div.magic" ).css( "height" , "10px" );

$( "a.menu" ).click(
function(){
$( "div.magic" ).animate({
opacity: 0,
height: "10px"
}, 500);

$( "div#magic" + this .id).animate({
opacity: 1,
height: height_element[ this .id]+”px”
}, 500);
}
);
})


さて、完全な幸福のために、ページをロードした後に0になり、メニュー項目を最初にクリックした後に値1になる特定の変数「first」を追加できます。 すべてのサブレベルが非表示になっているときに、開いているメニューサブレベルを非表示にするための500ミリ秒の遅延を取り除くために必要です。

実際の例はこちらにあります。

方法2

animate（）メソッドの代わりに、同じ500ミリ秒の期間でhide（）およびshow（）メソッドを使用します。

ただし、hide（）およびshow（）メソッドを使用すると、すべてのオブジェクトスタイルがスムーズに変更されます。つまり、必要なパディングも0から10に、またはその逆に変更されます。 効果はもちろん美しいですが、この場合は必要ありません。 したがって、パディングは別のコンテナに入れる必要があります。

この場合のHTML：

<a id= "1" class = "menu" > 1</a><br/>
<div id= "magic1" class = "magic" ><div class = "inner" > 2</div></div>
<a id= "2" class = "menu" > 1</a><br/>
<div id= "magic2" class = "magic" ><div class = "inner" > 2<br/> 2<br/> 2</div></div>
<a id= "3" class = "menu" > 1</a><br/>
<div id= "magic3" class = "magic" ><div class = "inner" > 2</div></div>

CSS：

div.magic{
overflow:hidden;
display:none;
}

a.menu{
cursor:pointer;
color:#0033CC;
text-decoration:underline;
margin-bottom:10px;
}

div.inner{
padding-left:10px;
}



そして、javascript：

$(document).ready(function(){
var first=0;
var last_id=0;
var id_now=0;

$( "a.menu" ).click(
function(){
id_now= this .id;

if (first!=0)
{
$( "div#magic" + last_id).hide(500,function(){
$( "div#magic" + id_now).show(500);
});
}
else
{
first=1;
$( "div#magic" + this .id).show(500);
}

last_id=id_now;
}
);
})

* This source code was highlighted with Source Code Highlighter .

ユーザーVoenniyに2番目の方法を完成させてくれてありがとう。

実際の例はこちらにあります。

そして最後の言葉として 。 この記事は、jQueryでメニューを作成するために書かれたものではありません。そのようなメニューはたくさんあるからです。 ここでの主な目標は、2つの方法で高さの値をシミュレートする方法を示すことです：animate（）メソッドを使用する場合のautoプロパティ。 しかし、そのようなタスクはメニューを作成するときだけでなく発生する可能性があります。