淡出所有其他内容后重新淡入表格答案

【问题标题】：re-fading in table after fading all other out淡出所有其他内容后重新淡入表格
【发布时间】：2014-01-03 07:30:15
【问题描述】：

嘿，我这里有这段代码，它会淡化页面上的所有表格，然后，如果找到了搜索词，则会突出显示该词。但是，我似乎无法让它重新淡入找到搜索词的那一行。

function searchAndHighlight(searchTerm, selector) {
    if(searchTerm) {
        var selector = selector || "body";
        var searchTermRegEx = new RegExp(searchTerm, 'ig');
        var matches = $(selector).text().match(searchTermRegEx);

        if(matches) {
            $('.highlightedSearched').removeClass('highlightedSearched');
            $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='highlightedSearched'>"+searchTerm+"</span>"));

            if($('.highlightedSearched:first').length) {
                $(".table").each(function( index ) {
                    $(this).fadeTo( "slow" , 0.2, function() {
                        $(".highlightedSearched").each(function( index ) {
                            $(this).fadeTo( "slow" , 1, function() {
                                $('html, body').animate({scrollTop:$('.highlightedSearched:first').position().top - 130}, 'slow');
                            });
                        });
                    });
                });
            }

            return true;
        }
    }
    return false;
}

<div class="table" style="opacity: 0.2;">
  <div class="row" onclick="changeChannel(3);" data-searched="name">
    <span class="cell">
      <img class="stationImg" src="images/logo1.jpg"><br>
      <div align="center" class="Channel">Channel 3<br>name</div>
    </span>
    <span class="cell_2hr">
      <span class="timeForShow">1:00p-3:00p<br></span>
      <span class="tvShowTitle">Golf: <span class="highlightedSearched" style="opacity: 1;">The</span> Challenge<br></span>
      <span class="tvEpisodeTitle">&nbsp;</span>
    </span>
    <span class="cell_30min">
      <span class="timeForShow">3:00p-3:30p<br></span>
      <span class="tvShowTitle">News<br></span>
      <span class="tvEpisodeTitle">&nbsp;</span>
    </span>
  </div>
</div>

它确实有效，因为它告诉它要淡入 1 this：

<span class="highlightedSearched" style="opacity: 1;">The</span> Challenge<br></span>

但我需要它来查找 highlightedSearched 所在的 table 类。

任何帮助都会很棒！

【问题讨论】：

如果您提供 JSFiddle 会更快得到答案

标签： jquery fadein fadeout fadeto

【解决方案1】：

如果您在调用函数后检查元素，您会看到内部输入跨度上的不透明度设置正确（我认为您承认）。问题在于不透明度是如何工作的，基本上你已经淡化了整个 DIV 包括所有的孩子，这压倒了你改变孩子的尝试。

首先给内部跨度一个额外的类（比如dimmable），现在当您进行搜索替换时，您想要关闭该跨度并打开一个新跨度：

$(selector).html($(selector).html().replace(searchTermRegEx, 
    "</span><span class='highlightedSearched dimmable'>"+
    searchTerm+
    "</span><span class='dimmable'>"
));

请注意，searchTerm 类仍然是可调光的，因为您希望它先淡出然后再进入。然后执行以下操作：

 $(".dimmable").each(function( index ) {
     $(this).fadeTo( "slow" , 0.4, function() {
         $(".highlightedSearched").each(function( index ) {
             $(this).fadeTo("slow", 1);
         });
     });
 });

例如here。

这有点小技巧，您可能需要重新考虑结构以使其更容易一些，或者选择不同的突出显示方法（黄色背景很普遍）。

您可能还想更改搜索系统以确保无法匹配任何奇怪的内容，目前元素之间的空格是可匹配的（这会产生奇怪的结果）。

编辑：另请参阅此答案：CSS opacity and child elements

【讨论】：