Question

我的页面上有一些面板。我还有一个菜单，应该动态地突出显示它的各个面板。

目前正在使用硬编码按钮突出显示单个定义的面板，但这并不是我想要的。

我想要它，以便突出显示的面板是从菜单中选择的面板。它还必须淡出回原始背景。

我尝试了jqueryUI＆＃39; 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;}

Answer 1

我不知道我是否帮你了。

你在寻找这样的东西（简化）：

var highlightAssociatedPanel=function(){
    var lastActive=$(".active");
    return function(e){
        if(lastActive) $(lastActive).removeClass("active");
        lastActive=$("#"+$(e.target).data("panel")).addClass("active");
    }
}();

$("ul").on("click","li", highlightAssociatedPanel);

玩这个fiddle 而不是添加简单的突出显示，您可以选择高亮度效果，无论您想要什么CSS。

Answer 2

尝试一下： HTML：

<ul>
    <li data-highlight="panelOne">One</li>
    <li data-highlight="panelTwo">Two</li>
    <li data-highlight="panelThree">Three</li>
    <li data-highlight="panelFour">Four</li>
    <li data-highlight="panelFive">Five</li>
</ul>

<div id="panelOne" class="panel ...">
    ...
</div>

<div id="panelTwo" class="panel ...">
    ...
</div>

JS：

$('[data-highlight]').on('click', function() {

    // Remove highlight class from all the panels
    $('.panel').removeClass('highlightPanel');

    // Get the panel that should be highlighted now
    $thisPanel = $('#'+$(this).data('highlight'));

    // Add highlighted class to clicked panel
    $thisPanel.addClass("highlightPanel");

    // Quick & Dirty: Remove that class after 3 seconds
    setTimeout(function(){
        $thisPanel.removeClass("highlightPanel");
    },3000);
});

小提琴：http://jsfiddle.net/FKtLJ/9/

Answer 3

听起来对我来说就是你在高亮完成动画后只需要一个回调。为此，请使用以下内容：

$（选择器）.animate（{ 适当的价值，function（）{ $（本）.removeAttr（ '风格'）; }）;

Answer 4

试试这个：

<强> HTML：

<ul>
<li>Title
    <ul id="menu">
        <li data-panelid="panelOne">One</li>
        <li data-panelid="panelTwo">Two</li>
        <li data-panelid="panelThree">Three</li>
        <li data-panelid="panelFour">Four</li>
        <li data-panelid="panelFive">Five</li>
    </ul>
</li>

<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>

<强> CSS：。容器 {宽度：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;}

<强>使用Javascript：

$(document).ready(function(){
    $('#menu li').click(function(){
        $('.highlightPanel').removeClass('highlightPanel');
        var target = $('#' + $(this).data('panelid'));
        $(target).addClass('highlightPanel');           
        var delay = setTimeout(function(){
            $(".highlightPanel").removeClass("highlightPanel");         
        }, 3000)
    })              
})

麻烦动态突出显示背景 - removeClass fadeOut

4 个答案: