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

Question

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

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

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

我尝试了 jqueryUI'sfadeOut和removeClass许多其他方法都没有成功。

要记住的事情：

1. 面板以背景 (css) 渐变开始。

2. 我想使用菜单选择来关注特定面板（突出显示它）。我想通过以下方式实现这一目标：

   a）应用一个用新的彩色渐变（css）替换背景的类

   b) 使用 jqueryUI 的内置effect(highlight)函数。但我认为这不会很好地恢复到原始背景渐变。

3. 突出显示应在菜单项选择时立即发生，然后在 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

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

$(selector).animate({ property : value }, function() { $(this).removeAttr('style'); });

Answer 2

我不知道我是否正确。

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

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

玩这个小提琴 而不是添加简单的突出显示，您可以为突出显示效果选择任何您想要的 CSS。

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

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: .container { 宽度: 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)
    })              
})