高亮 div 几秒钟

Question

我有很多 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 中，但我需要突出显示几秒钟，以便通知用户某些内容发生了变化。

Answer 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() 函数。

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

希望有帮助！

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

Answer 4

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

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