高亮 div 几秒钟

Posted 2023-03-06

【中文标题】高亮 div 几秒钟

【英文标题】：highlight div for few seconds

【发布时间】：2011-06-19 18:52:22

【问题描述】：

我有很多 div，当我有任何一个 div 时，它的内容会被复制到最顶部的 div，但我想突出显示最顶部的 div，我该如何使用 jQuery。

代码：

<div id="code"> </div>

<div id="1">Click Me</div>
<div id="2">Click Me, please</div>

当我点击 id 为 1 或 2 的 div 时，它的内容会被复制到带有“code” id 的 div 中，但我需要突出显示几秒钟，以便通知用户某些内容发生了变化。

【问题讨论】：

How do you make an element "flash" in jQuery的可能重复

【参考方案1】：

也有一个简单的方法可以使用 CSS 和 jQuery 来实现这一点，看看这个，

CSS

@keyframes highlight 
    0% 
        background: #ffff99; 
    
    100% 
        background: none;
    


.highlight 
    animation: highlight 2s;

jQuery:

function highlight()
    $('#YourElement').addClass("highlight");
    setTimeout(function () 
          $('#YourElement').removeClass('highlight');
    , 2000);

在您的活动中使用highlight() 函数。

【参考方案2】：

非常快速而肮脏的方法（查看文档 5 分钟 :p）：

<script>
  $(function() 
    //when clicking on all div but not the first one
    $("div:not(:first)").click(function() 
      //Content of the selected div gets copied to the top one
      $("div:first").text($(this).text());
      //At the end of the first animation execute the second animation
      $("div:first").animate(
          opacity:"0.5"
      , 1000, function() 
        $("div:first").animate(
            opacity:"1"
        , 1000);
      );
    );
  );

</script>

希望有帮助！

【讨论】：

正如 Ken 和 Vivek 指出的那样，使用$('div:first').effect('highlight',,3000); 可能会更好

Laurent：但是如果你想使用 .effect()，你必须包含 jQuery UI 依赖。

【参考方案3】：

如果您使用的是 jQuery UI，您可以这样做：

$('#code').effect('highlight',,3000); // three seconds

另外，您在下面两个元素上的 ID 无效。您不能以数字开头 ID（正如 Vivek 指出的那样，在 html5 中除外）。不要使用1 或2，而是使用具有某种语义价值的东西，例如answer1 或article1。

编辑：以下是使用当前 HTML 的方法，包括 div 的点击处理程序：

$('#a1,#a2').click( function()
   $('#code')
       .html( $.trim( $(this).text() ) )
       .effect('highlight',,1000); 
);

它正在运行：http://jsfiddle.net/redler/KrhHs/

【讨论】：

我正在使用 jQuery 和 jQuery UI Core，这个效果会起作用吗，现在它不起作用。请建议

Vivek，非常正确，我已经修改了答案。 @IMJM，我的代码 sn-p 中有一个错字——缺少引号。我已经修好了；也许这就是让你绊倒的原因？

【参考方案4】：

试试这个.. jquery 有Highlight 来实现这个..

$(document).ready(function() 
$('div.success').effect("highlight", , 3000);
);

【讨论】：

我正在使用 jQuery 和 jQuery UI Core，这个效果会起作用吗，现在它不起作用。请建议

是的..它应该可以工作...我已经给你参考了突出显示..你可以在那里看到...它正在工作。你有什么错误吗？

@I-M 对我来说工作正常：jsfiddle.net/yahavbr/XdUGn 请检查一下，看看它是否有效..

我在 jQuery UI 中包含 jquery.effects.core.js 和 jquery.effects.highlight.js 并且它可以工作。