Boost」など、さまざまなカンファレンスを企画・運営しています。BOOKS(コードジン・ブックス)は、CodeZineの連載からカットアップした、開発現場の課題解決に役立つ書籍シリーズです。6コントロールを隠す方法とスタイルを変更する方法(サンプル6)アニメーションリファレンスまとめ参考資料アニメーションを受けるコントロールを変更する方法(サンプル3)ここまでのアニメーションはすべてAnimationExtenderコントロールのTargetControlIDプロパティに設定されたコントロールに対して行われています。各アニメーションにAnimationTargetプロパティにコントロールIDを指定することで、指定されたコントロールに対してアニメーションを実行することが可能になります。サンプル3概要ページ上にButtonコントロールとPanelコントロールを配置し、プロパティ設定はデフォルトの状態にします。このサンプルのフォームレイアウトもサンプル1と同じです。Buttonコントロールの上にマウスがある場合にPanelコントロールの色を紫に変更し、コントロールからマウスが離れると赤色に変更するためのコードは次のようになります。</Animations></ajaxToolkit:AnimationExtender>実行時の画面は図17のようになります。OnHoverOverのイベントが発生している時は図18のようになり、OnHoverOutのイベントが発生している時には図19のようになります。サンプル3のOnHoverOutイベント時の画面AnimationTargetプロパティの注意点として、ASP.NETのコントロールIDを設定すべきではないという点です。AnimationTargetプロパティに設定するIDはClientIDプロパティを使用する必要があります。マスターページを使用しているページに対してAnimationTargetプロパティを設定する場合は[ctl00_ContentPlaceHolderID_コントロール名]というように設定します。ページ内に名前付コンテナを使用していない場合、ASP.NETのコントロールIDを直接入力することも可能です。Animationがあります。サンプル4概要ページ上にLabelコントロールとPanelコントロールを配置します。プロパティ設定はPanelのBackColorプロパティだけ任意の色に設定してください(図20)。サンプル4のフォームレイアウト画面Labelコントロールの上にマウスがある場合にPanelコントロールのFadeをはっきり表示し、コントロールからマウスが離れるとぼんやり表示させるコードは次のようになります。</Animations></ajaxToolkit:AnimationExtender>実行時の画面は図21のようになります。OnHoverOverのイベントが発生している時は図22のようになり、OnHoverOutのイベントが発生している時には図23のようになります。サンプル4のOnHoverOutイベント時の画面Fadeの調整は最小、最大の半透明値を設定することで対象のコントロールのFadeが遷移します。FadeInとFadeOutを、OnHoverイベントやOnMouseイベントで使用する時には最小値と最大値の設定を同じ値にすることで、滑らかなFadeが実装されます(異なる場合は少し不自然なFadeになります)。Opacityプロパティの値は1.0が最大で、0.0が最小となっています。Animationの特徴として、タグ内に属性を指定しない場合はそれぞれ最小値が0.0に、最大値が1.0に設定されます。NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Technologies。執筆コミュニティ「WINGSプロジェクト」代表。