私のページにはいくつかのパネルがあります。また、それぞれのパネルを動的に強調表示するメニューもあります。
現在、ハードコーディングされたボタンが単一の定義済みパネルを強調表示している場所で機能していますが、それは私が探しているものではありません。
強調表示されるパネルがメニューから選択されたものになるようにしたい。また、元の背景にフェード バックする必要があります。
jqueryUI や他の多くの方法を試してみましたがfadeOut、removeClassすべてうまくいきませんでした。
注意事項:
- パネルは、背景 (css) グラデーションで始まります。
メニュー選択を使用して、特定のパネルに注意を向けたい (強調表示したい)。次のいずれかでこれを達成したいと思います。
a) 背景を新しい色のグラデーション (css) に置き換えるクラスを適用する
b) jqueryUI の組み込み
effect(highlight)関数を使用する。しかし、これが元の背景グラデーションに戻るとうまくいくとは思いません。メニュー項目を選択するとすぐにハイライトが発生し、3 ～ 5 秒かけてゆっくりとフェードアウトして、元の背景のグラデーションに戻ります。
順調なスタートを切ったように見えますが、期待どおりに機能させることができません。
どんな助けでも大歓迎です。
JSFIDDLE: http://jsfiddle.net/tedgrafx/FKtLJ/1/
HTML:
<a href="#" id="button" class="ui-state-default ui-corner-all">Highlight Panel</a>
<ul>
<li>Title
<ul>
<li onclick=" FocusPanel('panelOne')">One</li>
<li onclick=" FocusPanel('panelTwo')">Two</li>
<li onclick=" FocusPanel('panelThree')">Three</li>
<li onclick=" FocusPanel('panelFour')">Four</li>
<li onclick=" FocusPanel('panelFive')">Five</li>
</ul>
</li>
</ul>
<div class="container">
<div id="panelOne" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">One</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
<div id="panelTwo" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Two</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
<div id="panelThree" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Three</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
<div id="panelFour" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Four</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
<div id="panelFive" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all">Five</h3>
<p>
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
</p>
</div>
</div>
Javascript:
$(function FocusPanel(panelName) {
// var panel = $( "#" + panelName );
// $( panel ).effect( "highlight", 3000 );
function runEffect() {
// run the effect
$( "#panelFour" ).effect( "highlight", 3000 );
// $( panel ).addClass( "highlightPanel" );
};
// set effect from hard-coded button
$( "#button" ).click(function() {
runEffect();
return false;
});
});
CSS:
.container
{ width: 100%; }
.ui-widget-content
{ background:linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); float:left; width:40%; height: auto; margin:0 10px 10px 0; padding: 0.4em; }
.ui-widget-header
{ margin: 0; padding: 0.4em; text-align: center; }
.highlightPanel
{background:#ffff00;}