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

【问题标题】：Trouble Dynamically Highlighting Background - removeClass fadeOut麻烦动态突出显示背景 - removeClass fadeOut
【发布时间】：2013-09-18 14:20:12
【问题描述】：

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

目前在硬编码按钮突出显示单个已定义面板的情况下工作，但这并不是我想要的。

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

我试过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;}

【问题讨论】：

您要保留“突出显示面板”按钮还是只在单击相应列表项时突出显示面板？
+1 用小提琴提出精心设计的问题

标签： jquery css jquery-ui background highlight

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案2】：

在我看来，您只需要在高亮动画完成后回调。为此，请使用以下命令：

$(选择器).animate({ 适当的价值 }，功能（） { $(this).removeAttr('style'); });

【讨论】：

【解决方案3】：

试试这个： 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/

【讨论】：

【解决方案4】：

我不知道我是否正确。

您是否正在寻找这样的东西（简化版）：

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。

【讨论】：